chore: use Button from @signozhq/ui

* 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
 

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
 }

frontend/jest.config.ts

@@ -45,7 +45,8 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,6 +24,10 @@ window.matchMedia =
 		};
 	};
 
+if (!HTMLElement.prototype.scrollIntoView) {
+	HTMLElement.prototype.scrollIntoView = function (): void {};
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,23 +48,9 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
-    "@signozhq/button": "0.0.5",
-    "@signozhq/calendar": "0.1.1",
-    "@signozhq/callout": "0.0.4",
-    "@signozhq/checkbox": "0.0.4",
-    "@signozhq/combobox": "0.0.4",
-    "@signozhq/command": "0.0.2",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/dialog": "0.0.4",
-    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
-    "@signozhq/input": "0.0.4",
-    "@signozhq/popover": "0.1.2",
-    "@signozhq/radio-group": "0.0.4",
-    "@signozhq/resizable": "0.0.2",
-    "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "0.0.3",
-    "@signozhq/ui": "0.0.5",
+    "@signozhq/ui": "0.0.9",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

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/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/infra/getHostAttributeKeys.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
-import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
@@ -12,7 +12,7 @@ import {
 
 export const getHostAttributeKeys = async (
 	searchText = '',
-	entity: K8sCategory,
+	entity: InfraMonitoringEntity,
 ): Promise<SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse> => {
 	try {
 		const response: AxiosResponse<{

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -33,6 +33,8 @@ export interface HostData {
 	hostName: string;
 	active: boolean;
 	os: string;
+	/** Present when the list API returns grouped rows or extra resource attributes. */
+	meta?: Record<string, string>;
 	cpu: number;
 	cpuTimeSeries: TimeSeries;
 	memory: number;

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -1,127 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { UnderscoreToDotMap } from '../utils';
-
-export interface K8sNodesListPayload {
-	filters: TagFilter;
-	groupBy?: BaseAutocompleteData[];
-	offset?: number;
-	limit?: number;
-	orderBy?: {
-		columnName: string;
-		order: 'asc' | 'desc';
-	};
-}
-
-export interface K8sNodesData {
-	nodeUID: string;
-	nodeCPUUsage: number;
-	nodeCPUAllocatable: number;
-	nodeMemoryUsage: number;
-	nodeMemoryAllocatable: number;
-	meta: {
-		k8s_node_name: string;
-		k8s_node_uid: string;
-		k8s_cluster_name: string;
-	};
-}
-
-export interface K8sNodesListResponse {
-	status: string;
-	data: {
-		type: string;
-		records: K8sNodesData[];
-		groups: null;
-		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
-	};
-}
-
-export const nodesMetaMap = [
-	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
-	{ dot: 'k8s.node.uid', under: 'k8s_node_uid' },
-	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
-] as const;
-
-export function mapNodesMeta(
-	raw: Record<string, unknown>,
-): K8sNodesData['meta'] {
-	const out: Record<string, unknown> = { ...raw };
-	nodesMetaMap.forEach(({ dot, under }) => {
-		if (dot in raw) {
-			const v = raw[dot];
-			out[under] = typeof v === 'string' ? v : raw[under];
-		}
-	});
-	return out as K8sNodesData['meta'];
-}
-
-export const getK8sNodesList = async (
-	props: K8sNodesListPayload,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
-): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
-	try {
-		const requestProps =
-			dotMetricsEnabled && Array.isArray(props.filters?.items)
-				? {
-						...props,
-						filters: {
-							...props.filters,
-							items: props.filters.items.reduce<typeof props.filters.items>(
-								(acc, item) => {
-									if (item.value === undefined) {
-										return acc;
-									}
-									if (
-										item.key &&
-										typeof item.key === 'object' &&
-										'key' in item.key &&
-										typeof item.key.key === 'string'
-									) {
-										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-										acc.push({
-											...item,
-											key: { ...item.key, key: mappedKey },
-										});
-									} else {
-										acc.push(item);
-									}
-									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
-
-		const response = await axios.post('/nodes/list', requestProps, {
-			signal,
-			headers,
-		});
-		const payload: K8sNodesListResponse = response.data;
-
-		// one-liner to map dot→underscore
-		payload.data.records = payload.data.records.map((record) => ({
-			...record,
-			meta: mapNodesMeta(record.meta as Record<string, unknown>),
-		}));
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload,
-			params: requestProps,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};

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

@@ -10,20 +10,6 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
-import '@signozhq/button';
-import '@signozhq/calendar';
-import '@signozhq/callout';
-import '@signozhq/checkbox';
-import '@signozhq/combobox';
-import '@signozhq/command';
 import '@signozhq/design-tokens';
-import '@signozhq/dialog';
-import '@signozhq/drawer';
 import '@signozhq/icons';
-import '@signozhq/input';
-import '@signozhq/popover';
-import '@signozhq/radio-group';
-import '@signozhq/resizable';
-import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -80,12 +80,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/button';
+import { Button } from '@signozhq/ui';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
@@ -23,8 +23,10 @@ function AuthHeader(): JSX.Element {
 			</div>
 			<Button
 				className="auth-header-help-button"
-				prefixIcon={<LifeBuoy size={12} />}
+				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
+				variant="solid"
+				color="none"
 			>
 				Get Help
 			</Button>

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

@@ -43,12 +43,12 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 }

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/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,10 +1,13 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -137,6 +140,7 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<Button
 					type="submit"
+					// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 					form="create-sa-form"
 					variant="solid"
 					color="primary"

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

@@ -1,7 +1,13 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import {
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	waitForElementToBeRemoved,
+} from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -121,12 +127,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByRole('dialog', { name: /New Service Account/i });
+		const dialog = await screen.findByRole('dialog', {
+			name: /New Service Account/i,
+		});
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /New Service Account/i }),
-		).not.toBeInTheDocument();
+		await waitForElementToBeRemoved(dialog);
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/calendar';
+import { Calendar } from '@signozhq/ui';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
+import { Button } from '@signozhq/ui';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -661,7 +661,9 @@ function CustomTimePicker({
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
 						data-testid="zoom-out-btn"
-						prefixIcon={<ZoomOut size={14} />}
+						prefix={<ZoomOut size={14} />}
+						variant="solid"
+						color="none"
 					/>
 				</Tooltip>
 			)}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
+import { Button, DialogFooter, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

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

@@ -1,17 +1,10 @@
 .edit-member-drawer {
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
 	&__body {
 		flex: 1;
 		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
-		padding: var(--padding-5) var(--padding-4);
 	}
 
 	&__field {
@@ -120,11 +113,6 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		height: 56px;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--l1-border);
-		flex-shrink: 0;
-		background: var(--card);
 	}
 
 	&__footer-left {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/button';
-import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Badge, toast } from '@signozhq/ui';
+import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -596,65 +593,69 @@ function EditMemberDrawer({
 	const drawerContent = (
 		<div className="edit-member-drawer__layout">
 			<div className="edit-member-drawer__body">{drawerBody}</div>
+		</div>
+	);
 
-			{!isDeleted && (
-				<div className="edit-member-drawer__footer">
-					<div className="edit-member-drawer__footer-left">
-						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-									onClick={(): void => setShowDeleteConfirm(true)}
-									disabled={isRootUser || isSelf}
-								>
-									<Trash2 size={12} />
-									{isInvited ? 'Revoke Invite' : 'Delete Member'}
-								</Button>
-							</span>
-						</Tooltip>
-
-						<div className="edit-member-drawer__footer-divider" />
-						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-								>
-									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
-								</Button>
-							</span>
-						</Tooltip>
-					</div>
-
-					<div className="edit-member-drawer__footer-right">
-						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-							<X size={14} />
-							Cancel
-						</Button>
-
+	const footer = (
+		<div className="edit-member-drawer__footer">
+			<div className="edit-member-drawer__footer-left">
+				<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+					<span className="edit-member-drawer__tooltip-wrapper">
 						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+							onClick={(): void => setShowDeleteConfirm(true)}
+							disabled={isRootUser || isSelf}
 							variant="solid"
-							color="primary"
-							size="sm"
-							disabled={!isDirty || isSaving || isRootUser}
-							onClick={handleSave}
+							color="none"
 						>
-							{isSaving ? 'Saving...' : 'Save Member Details'}
+							<Trash2 size={12} />
+							{isInvited ? 'Revoke Invite' : 'Delete Member'}
 						</Button>
-					</div>
-				</div>
-			)}
+					</span>
+				</Tooltip>
+
+				<div className="edit-member-drawer__footer-divider" />
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<span className="edit-member-drawer__tooltip-wrapper">
+						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+							onClick={handleGenerateResetLink}
+							disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+							variant="solid"
+							color="none"
+						>
+							<RefreshCw size={12} />
+							{isGeneratingLink
+								? 'Generating...'
+								: isInvited
+								? getInviteButtonLabel(
+										isLoadingTokenStatus,
+										existingToken,
+										isTokenExpired,
+										tokenNotFound,
+								  )
+								: 'Generate Password Reset Link'}
+						</Button>
+					</span>
+				</Tooltip>
+			</div>
+
+			<div className="edit-member-drawer__footer-right">
+				<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+					<X size={14} />
+					Cancel
+				</Button>
+
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					disabled={!isDirty || isSaving || isRootUser}
+					onClick={handleSave}
+				>
+					{isSaving ? 'Saving...' : 'Save Member Details'}
+				</Button>
+			</div>
 		</div>
 	);
 
@@ -668,14 +669,14 @@ function EditMemberDrawer({
 					}
 				}}
 				direction="right"
-				type="panel"
 				showCloseButton
 				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Member Details' }}
-				content={drawerContent}
-				className="edit-member-drawer"
-			/>
+				title="Member Details"
+				footer={footer}
+				width="wide"
+			>
+				{drawerContent}
+			</DrawerWrapper>
 
 			<ResetLinkDialog
 				open={showResetLinkDialog}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@signozhq/button';
-import { DialogWrapper } from '@signozhq/dialog';
 import { Check, Copy } from '@signozhq/icons';
+import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;
@@ -49,7 +48,7 @@ function ResetLinkDialog({
 						color="secondary"
 						size="sm"
 						onClick={onCopy}
-						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}

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

@@ -20,17 +20,29 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
 }));
 
-jest.mock('@signozhq/dialog', () => ({
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
+	DrawerWrapper: ({
+		children,
+		open,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{children}</div> : null),
 	DialogWrapper: ({
 		children,
 		open,
@@ -48,24 +60,6 @@ jest.mock('@signozhq/dialog', () => ({
 	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
 		<div>{children}</div>
 	),
-}));
-
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-}));
-
-jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
-	convertToApiError: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -21,7 +21,7 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
+			color-mix(in srgb, var(--l1-background) 12%, transparent) 0.07%,
 			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
 			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
 			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
@@ -40,15 +40,17 @@
 			margin: auto;
 		}
 	}
+
 	&__body {
 		padding: 0;
-		background: var(--l2-background);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 	}
+
 	&__header {
 		background: none !important;
+
 		.ant-modal-title {
 			display: flex;
 			justify-content: space-between;
@@ -80,6 +82,7 @@
 				pointer-events: none;
 			}
 		}
+
 		.close-button {
 			padding: 3px 7px;
 			background: var(--l2-background);
@@ -90,15 +93,15 @@
 			box-shadow: none;
 		}
 	}
+
 	&__footer {
 		margin: 0 !important;
 		height: 6px;
-		background: var(--bg-sakura-500);
 	}
+
 	&__content {
 		padding: 0 !important;
 		border-radius: 4px;
 		overflow: hidden;
-		background: none !important;
 	}
 }

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,7 +5,6 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

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/HostMetricsDetail/HostMetricDetail.interfaces.ts

@@ -1,7 +0,0 @@
-import { HostData } from 'api/infraMonitoring/getHostLists';
-
-export type HostDetailProps = {
-	host: HostData | null;
-	isModalTimeSelection: boolean;
-	onClose: () => void;
-};

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss

@@ -1,145 +0,0 @@
-.host-metric-traces {
-	margin-top: 1rem;
-
-	.host-metric-traces-header {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 1rem;
-
-		gap: 8px;
-		padding: 12px;
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-
-		.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;
-				}
-			}
-		}
-	}
-
-	.host-metric-traces-table {
-		.ant-table-content {
-			overflow: hidden !important;
-		}
-
-		.ant-table {
-			border-radius: 3px;
-			border: 1px solid var(--l1-border);
-
-			.ant-table-thead > tr > th {
-				padding: 12px;
-				font-weight: 500;
-				font-size: 12px;
-				line-height: 18px;
-
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
-				border-bottom: none;
-
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 600;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-
-				&::before {
-					background-color: transparent;
-				}
-			}
-
-			.ant-table-thead > tr > th:has(.hostname-column-header) {
-				background: var(--l2-background);
-			}
-
-			.ant-table-cell {
-				padding: 12px;
-				font-size: 13px;
-				line-height: 20px;
-				color: var(--l1-foreground);
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
-			}
-
-			.ant-table-cell:has(.hostname-column-value) {
-				background: var(--l2-background);
-			}
-
-			.hostname-column-value {
-				color: var(--l1-foreground);
-				font-family: 'Geist Mono';
-				font-style: normal;
-				font-weight: 600;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.status-cell {
-				.active-tag {
-					color: var(--bg-forest-500);
-					padding: 4px 8px;
-					border-radius: 4px;
-					font-size: 12px;
-					font-weight: 500;
-				}
-			}
-
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
-			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
-			}
-
-			.ant-table-cell:first-child {
-				text-align: justify;
-			}
-
-			.ant-table-cell:nth-child(2) {
-				padding-left: 16px;
-				padding-right: 16px;
-			}
-
-			.ant-table-cell:nth-child(n + 3) {
-				padding-right: 24px;
-			}
-			.column-header-right {
-				text-align: right;
-			}
-			.ant-table-tbody > tr > td {
-				border-bottom: none;
-			}
-
-			.ant-table-thead
-				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
-				background-color: transparent;
-			}
-
-			.ant-empty-normal {
-				visibility: hidden;
-			}
-		}
-
-		.ant-table-container::after {
-			content: none;
-		}
-	}
-}

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -1,222 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import logEvent from 'api/common/logEvent';
-import { ResizeTable } from 'components/ResizeTable';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { ErrorText } from 'container/TimeSeriesView/styles';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
-import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Pagination } from 'hooks/queryPagination';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { VIEWS } from '../constants';
-import { getHostTracesQueryPayload, selectedColumns } from './constants';
-import { getListColumns } from './utils';
-
-import './HostMetricTraces.styles.scss';
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	handleChangeTracesFilters: (
-		value: IBuilderQuery['filters'],
-		view: VIEWS,
-	) => void;
-	tracesFilters: IBuilderQuery['filters'];
-	selectedInterval: Time;
-}
-
-function HostMetricTraces({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	handleChangeTracesFilters,
-	tracesFilters,
-	selectedInterval,
-}: Props): JSX.Element {
-	const [traces, setTraces] = useState<any[]>([]);
-	const [offset] = useState<number>(0);
-
-	const { currentQuery } = useQueryBuilder();
-	const updatedCurrentQuery = useMemo(
-		() => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					{
-						...currentQuery.builder.queryData[0],
-						dataSource: DataSource.TRACES,
-						aggregateOperator: 'noop',
-						aggregateAttribute: {
-							...currentQuery.builder.queryData[0].aggregateAttribute,
-						},
-						filters: {
-							items:
-								tracesFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
-								[],
-							op: 'AND',
-						},
-					},
-				],
-			},
-		}),
-		[currentQuery, tracesFilters?.items],
-	);
-
-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-
-	const queryPayload = useMemo(
-		() =>
-			getHostTracesQueryPayload(
-				timeRange.startTime,
-				timeRange.endTime,
-				paginationQueryData?.offset || offset,
-				tracesFilters,
-			),
-		[
-			timeRange.startTime,
-			timeRange.endTime,
-			offset,
-			tracesFilters,
-			paginationQueryData,
-		],
-	);
-
-	const { data, isLoading, isFetching, isError } = useQuery({
-		queryKey: [
-			'hostMetricTraces',
-			timeRange.startTime,
-			timeRange.endTime,
-			offset,
-			tracesFilters,
-			DEFAULT_ENTITY_VERSION,
-			paginationQueryData,
-		],
-		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
-		enabled: !!queryPayload,
-	});
-
-	const traceListColumns = getListColumns(selectedColumns);
-
-	useEffect(() => {
-		if (data?.payload?.data?.newResult?.data?.result) {
-			const currentData = data.payload.data.newResult.data.result;
-			if (currentData.length > 0 && currentData[0].list) {
-				if (offset === 0) {
-					setTraces(currentData[0].list ?? []);
-				} else {
-					setTraces((prev) => [...prev, ...(currentData[0].list ?? [])]);
-				}
-			}
-		}
-	}, [data, offset]);
-
-	const isDataEmpty =
-		!isLoading && !isFetching && !isError && traces.length === 0;
-	const hasAdditionalFilters =
-		tracesFilters?.items && tracesFilters?.items?.length > 1;
-
-	const totalCount =
-		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
-
-	const handleRowClick = useCallback(() => {
-		logEvent(InfraMonitoringEvents.ItemClicked, {
-			entity: InfraMonitoringEvents.HostEntity,
-			view: InfraMonitoringEvents.TracesView,
-		});
-	}, []);
-
-	return (
-		<div className="host-metric-traces">
-			<div className="host-metric-traces-header">
-				<div className="filter-section">
-					{query && (
-						<QueryBuilderSearch
-							query={query as IBuilderQuery}
-							onChange={(value): void =>
-								handleChangeTracesFilters(value, VIEWS.TRACES)
-							}
-							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>
-
-			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
-
-			{isLoading && traces.length === 0 && <TracesLoading />}
-
-			{isDataEmpty && !hasAdditionalFilters && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataEmpty && hasAdditionalFilters && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
-			)}
-
-			{!isError && traces.length > 0 && (
-				<div className="host-metric-traces-table">
-					<TraceExplorerControls
-						isLoading={isFetching && traces.length === 0}
-						totalCount={totalCount}
-						perPageOptions={PER_PAGE_OPTIONS}
-						showSizeChanger={false}
-					/>
-					<ResizeTable
-						tableLayout="fixed"
-						pagination={false}
-						scroll={{ x: true }}
-						loading={isFetching && traces.length === 0}
-						dataSource={traces}
-						columns={traceListColumns}
-						onRow={(): Record<string, unknown> => ({
-							onClick: (): void => handleRowClick(),
-						})}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default HostMetricTraces;

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -1,183 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { nanoToMilli } from 'utils/timeUtils';
-
-export const columns = [
-	{
-		dataIndex: 'timestamp',
-		key: 'timestamp',
-		title: 'Timestamp',
-		width: 200,
-		render: (timestamp: string): string => new Date(timestamp).toLocaleString(),
-	},
-	{
-		title: 'Service Name',
-		dataIndex: ['data', 'serviceName'],
-		key: 'serviceName-string-tag',
-		width: 150,
-	},
-	{
-		title: 'Name',
-		dataIndex: ['data', 'name'],
-		key: 'name-string-tag',
-		width: 145,
-	},
-	{
-		title: 'Duration',
-		dataIndex: ['data', 'durationNano'],
-		key: 'durationNano-float64-tag',
-		width: 145,
-		render: (duration: number): string => `${nanoToMilli(duration)}ms`,
-	},
-	{
-		title: 'HTTP Method',
-		dataIndex: ['data', 'httpMethod'],
-		key: 'httpMethod-string-tag',
-		width: 145,
-	},
-	{
-		title: 'Status Code',
-		dataIndex: ['data', 'responseStatusCode'],
-		key: 'responseStatusCode-string-tag',
-		width: 145,
-	},
-];
-
-export const selectedColumns: BaseAutocompleteData[] = [
-	{
-		key: 'timestamp',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	{
-		key: 'serviceName',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	{
-		key: 'name',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	{
-		key: 'durationNano',
-		dataType: DataTypes.Float64,
-		type: 'tag',
-	},
-	{
-		key: 'httpMethod',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	{
-		key: 'responseStatusCode',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-];
-
-export const getHostTracesQueryPayload = (
-	start: number,
-	end: number,
-	offset = 0,
-	filters: IBuilderQuery['filters'],
-): GetQueryResultsProps => ({
-	query: {
-		promql: [],
-		clickhouse_sql: [],
-		builder: {
-			queryData: [
-				{
-					dataSource: DataSource.TRACES,
-					queryName: 'A',
-					aggregateOperator: 'noop',
-					aggregateAttribute: {
-						id: '------false',
-						dataType: DataTypes.EMPTY,
-						key: '',
-						type: '',
-					},
-					timeAggregation: 'rate',
-					spaceAggregation: 'sum',
-					functions: [],
-					filters,
-					expression: 'A',
-					disabled: false,
-					stepInterval: 60,
-					having: [],
-					limit: null,
-					orderBy: [
-						{
-							columnName: 'timestamp',
-							order: 'desc',
-						},
-					],
-					groupBy: [],
-					legend: '',
-					reduceTo: ReduceOperators.AVG,
-				},
-			],
-			queryFormulas: [],
-			queryTraceOperator: [],
-		},
-		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
-		queryType: EQueryType.QUERY_BUILDER,
-	},
-	graphType: PANEL_TYPES.LIST,
-	selectedTime: 'GLOBAL_TIME',
-	start,
-	end,
-	params: {
-		dataSource: DataSource.TRACES,
-	},
-	tableParams: {
-		pagination: {
-			limit: 10,
-			offset,
-		},
-		selectColumns: [
-			{
-				key: 'serviceName',
-				dataType: 'string',
-				type: 'tag',
-				id: 'serviceName--string--tag--true',
-				isIndexed: false,
-			},
-			{
-				key: 'name',
-				dataType: 'string',
-				type: 'tag',
-				id: 'name--string--tag--true',
-				isIndexed: false,
-			},
-			{
-				key: 'durationNano',
-				dataType: 'float64',
-				type: 'tag',
-				id: 'durationNano--float64--tag--true',
-				isIndexed: false,
-			},
-			{
-				key: 'httpMethod',
-				dataType: 'string',
-				type: 'tag',
-				id: 'httpMethod--string--tag--true',
-				isIndexed: false,
-			},
-			{
-				key: 'responseStatusCode',
-				dataType: 'string',
-				type: 'tag',
-				id: 'responseStatusCode--string--tag--true',
-				isIndexed: false,
-			},
-		],
-	},
-});

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -1,176 +0,0 @@
-.host-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
-	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-	.ant-drawer-header {
-		padding: 8px 16px;
-		border-bottom: none;
-
-		align-items: stretch;
-
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
-	}
-
-	.ant-drawer-close {
-		margin-inline-end: 0px;
-	}
-
-	.ant-drawer-body {
-		display: flex;
-		flex-direction: column;
-		padding: 16px;
-	}
-
-	.title {
-		color: var(--l2-foreground);
-		font-family: 'Geist Mono';
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-
-	.radio-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-	}
-
-	.host-detail-drawer__host {
-		.host-details-grid {
-			.labels-row,
-			.values-row {
-				display: grid;
-				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
-				gap: 30px;
-				align-items: center;
-			}
-
-			.labels-row {
-				margin-bottom: 8px;
-			}
-
-			.host-details-metadata-label {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-			}
-
-			.status-tag {
-				margin: 0;
-
-				&.active {
-					color: var(--success-500);
-					background: var(--success-100);
-					border-color: var(--success-500);
-				}
-
-				&.inactive {
-					color: var(--error-500);
-					background: var(--error-100);
-					border-color: var(--error-500);
-				}
-			}
-
-			.progress-container {
-				width: 158px;
-				.ant-progress {
-					margin: 0;
-
-					.ant-progress-text {
-						font-weight: 600;
-					}
-				}
-			}
-
-			.ant-card {
-				&.ant-card-bordered {
-					border: 1px solid var(--l1-border) !important;
-				}
-			}
-		}
-	}
-
-	.tabs-and-search {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin: 16px 0;
-
-		.action-btn {
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
-	.views-tabs-container {
-		margin-top: 1.5rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.views-tabs {
-			color: var(--l2-foreground);
-
-			.view-title {
-				display: flex;
-				gap: var(--margin-2);
-				align-items: center;
-				justify-content: center;
-				font-size: var(--font-size-xs);
-				font-style: normal;
-				font-weight: var(--font-weight-normal);
-			}
-
-			.tab {
-				border: 1px solid var(--l1-border);
-				width: 114px;
-			}
-
-			.tab::before {
-				background: var(--l1-border);
-			}
-
-			.selected_view {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
-			}
-
-			.selected_view::before {
-				background: var(--l1-border);
-			}
-		}
-
-		.compass-button {
-			width: 30px;
-			height: 30px;
-
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	.ant-drawer-close {
-		padding: 0px;
-	}
-}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -1,595 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom-v5-compat';
-import { Color, Spacing } from '@signozhq/design-tokens';
-import {
-	Button,
-	Divider,
-	Drawer,
-	Progress,
-	Radio,
-	Tag,
-	Typography,
-} from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
-import logEvent from 'api/common/logEvent';
-import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { getFiltersFromParams } from 'container/InfraMonitoringK8s/commonUtils';
-import { INFRA_MONITORING_K8S_PARAMS_KEYS } from 'container/InfraMonitoringK8s/constants';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useUrlQuery from 'hooks/useUrlQuery';
-import GetMinMax from 'lib/getMinMax';
-import {
-	BarChart2,
-	ChevronsLeftRight,
-	Compass,
-	DraftingCompass,
-	Package2,
-	ScrollText,
-	X,
-} from 'lucide-react';
-import { AppState } from 'store/reducers';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-import {
-	LogsAggregatorOperator,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as uuidv4 } from 'uuid';
-
-import { VIEW_TYPES, VIEWS } from './constants';
-import Containers from './Containers/Containers';
-import { HostDetailProps } from './HostMetricDetail.interfaces';
-import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailedView';
-import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
-import Metrics from './Metrics/Metrics';
-import Processes from './Processes/Processes';
-
-import './HostMetricsDetail.styles.scss';
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function HostMetricsDetails({
-	host,
-	onClose,
-	isModalTimeSelection,
-}: HostDetailProps): JSX.Element {
-	const { maxTime, minTime, selectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-	const [searchParams, setSearchParams] = useSearchParams();
-
-	const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
-		minTime,
-	]);
-	const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [
-		maxTime,
-	]);
-
-	const urlQuery = useUrlQuery();
-
-	const [modalTimeRange, setModalTimeRange] = useState(() => ({
-		startTime: startMs,
-		endTime: endMs,
-	}));
-
-	const lastSelectedInterval = useRef<Time | null>(null);
-
-	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
-	);
-
-	const [selectedView, setSelectedView] = useState<VIEWS>(
-		(searchParams.get('view') as VIEWS) || VIEWS.METRICS,
-	);
-	const isDarkMode = useIsDarkMode();
-
-	const initialFilters = useMemo(() => {
-		const urlView = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW);
-		const queryKey =
-			urlView === VIEW_TYPES.LOGS
-				? INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS
-				: INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS;
-		const filters = getFiltersFromParams(searchParams, queryKey);
-		if (filters) {
-			return filters;
-		}
-
-		return {
-			op: 'AND',
-			items: [
-				{
-					id: uuidv4(),
-					key: {
-						key: 'host.name',
-						dataType: DataTypes.String,
-						type: 'resource',
-						id: 'host.name--string--resource--false',
-					},
-					op: '=',
-					value: host?.hostName || '',
-				},
-			],
-		};
-	}, [host?.hostName, searchParams]);
-
-	const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>(
-		initialFilters,
-	);
-
-	const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
-		initialFilters,
-	);
-
-	useEffect(() => {
-		if (host) {
-			logEvent(InfraMonitoringEvents.PageVisited, {
-				entity: InfraMonitoringEvents.HostEntity,
-				page: InfraMonitoringEvents.DetailedPage,
-			});
-		}
-	}, [host]);
-
-	useEffect(() => {
-		setLogFilters(initialFilters);
-		setTracesFilters(initialFilters);
-	}, [initialFilters]);
-
-	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
-
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
-
-			setModalTimeRange({
-				startTime: Math.floor(minTime / 1000000000),
-				endTime: Math.floor(maxTime / 1000000000),
-			});
-		}
-	}, [selectedTime, minTime, maxTime]);
-
-	const handleTabChange = (e: RadioChangeEvent): void => {
-		setSelectedView(e.target.value);
-		if (host?.hostName) {
-			setSelectedView(e.target.value);
-			setSearchParams({
-				...Object.fromEntries(searchParams.entries()),
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: e.target.value,
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(null),
-				[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(null),
-			});
-		}
-		logEvent(InfraMonitoringEvents.TabChanged, {
-			entity: InfraMonitoringEvents.HostEntity,
-			view: e.target.value,
-		});
-	};
-
-	const handleTimeChange = useCallback(
-		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
-			setSelectedInterval(interval as Time);
-
-			if (interval === 'custom' && dateTimeRange) {
-				setModalTimeRange({
-					startTime: Math.floor(dateTimeRange[0] / 1000),
-					endTime: Math.floor(dateTimeRange[1] / 1000),
-				});
-			} else {
-				const { maxTime, minTime } = GetMinMax(interval);
-
-				setModalTimeRange({
-					startTime: Math.floor(minTime / 1000000000),
-					endTime: Math.floor(maxTime / 1000000000),
-				});
-			}
-
-			logEvent(InfraMonitoringEvents.TimeUpdated, {
-				entity: InfraMonitoringEvents.HostEntity,
-				interval,
-				page: InfraMonitoringEvents.DetailedPage,
-			});
-		},
-		[],
-	);
-
-	const handleChangeLogFilters = useCallback(
-		(value: IBuilderQuery['filters'], view: VIEWS) => {
-			setLogFilters((prevFilters) => {
-				const hostNameFilter = prevFilters?.items?.find(
-					(item) => item.key?.key === 'host.name',
-				);
-				const paginationFilter = value?.items?.find(
-					(item) => item.key?.key === 'id',
-				);
-				const newFilters = value?.items?.filter(
-					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
-				);
-
-				if (newFilters && newFilters?.length > 0) {
-					logEvent(InfraMonitoringEvents.FilterApplied, {
-						entity: InfraMonitoringEvents.HostEntity,
-						view: InfraMonitoringEvents.LogsView,
-						page: InfraMonitoringEvents.DetailedPage,
-					});
-				}
-
-				const updatedFilters = {
-					op: 'AND',
-					items: [
-						hostNameFilter,
-						...(newFilters || []),
-						...(paginationFilter ? [paginationFilter] : []),
-					].filter((item): item is TagFilterItem => item !== undefined),
-				};
-
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(
-						updatedFilters,
-					),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
-				});
-				return updatedFilters;
-			});
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	const handleChangeTracesFilters = useCallback(
-		(value: IBuilderQuery['filters'], view: VIEWS) => {
-			setTracesFilters((prevFilters) => {
-				const hostNameFilter = prevFilters?.items?.find(
-					(item) => item.key?.key === 'host.name',
-				);
-
-				if (value?.items && value?.items?.length > 0) {
-					logEvent(InfraMonitoringEvents.FilterApplied, {
-						entity: InfraMonitoringEvents.HostEntity,
-						view: InfraMonitoringEvents.TracesView,
-						page: InfraMonitoringEvents.DetailedPage,
-					});
-				}
-
-				const updatedFilters = {
-					op: 'AND',
-					items: [
-						hostNameFilter,
-						...(value?.items?.filter((item) => item.key?.key !== 'host.name') || []),
-					].filter((item): item is TagFilterItem => item !== undefined),
-				};
-
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(
-						updatedFilters,
-					),
-					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
-				});
-
-				return updatedFilters;
-			});
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	const handleExplorePagesRedirect = (): void => {
-		if (selectedInterval !== 'custom') {
-			urlQuery.set(QueryParams.relativeTime, selectedInterval);
-		} else {
-			urlQuery.delete(QueryParams.relativeTime);
-			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
-			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
-		}
-
-		logEvent(InfraMonitoringEvents.ExploreClicked, {
-			view: selectedView,
-			entity: InfraMonitoringEvents.HostEntity,
-			page: InfraMonitoringEvents.DetailedPage,
-		});
-
-		if (selectedView === VIEW_TYPES.LOGS) {
-			const filtersWithoutPagination = {
-				...logFilters,
-				items: logFilters?.items?.filter((item) => item.key?.key !== 'id') || [],
-			};
-
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.logs,
-							aggregateOperator: LogsAggregatorOperator.NOOP,
-							filters: filtersWithoutPagination,
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
-			const compositeQuery = {
-				...initialQueryState,
-				queryType: 'builder',
-				builder: {
-					...initialQueryState.builder,
-					queryData: [
-						{
-							...initialQueryBuilderFormValuesMap.traces,
-							aggregateOperator: TracesAggregatorOperator.NOOP,
-							filters: tracesFilters,
-						},
-					],
-				},
-			};
-
-			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
-
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
-		}
-	};
-
-	const handleClose = (): void => {
-		setSelectedInterval(selectedTime as Time);
-		lastSelectedInterval.current = null;
-		setSearchParams({});
-
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
-
-			setModalTimeRange({
-				startTime: Math.floor(minTime / 1000000000),
-				endTime: Math.floor(maxTime / 1000000000),
-			});
-		}
-		setSelectedView(VIEW_TYPES.METRICS);
-		onClose();
-	};
-
-	return (
-		<Drawer
-			width="70%"
-			title={
-				<>
-					<Divider type="vertical" />
-					<Typography.Text className="title">{host?.hostName}</Typography.Text>
-				</>
-			}
-			placement="right"
-			onClose={handleClose}
-			open={!!host}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="host-detail-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
-		>
-			{host && (
-				<>
-					<div className="host-detail-drawer__host">
-						<div className="host-details-grid">
-							<div className="labels-row">
-								<Typography.Text
-									type="secondary"
-									className="host-details-metadata-label"
-								>
-									STATUS
-								</Typography.Text>
-								<Typography.Text
-									type="secondary"
-									className="host-details-metadata-label"
-								>
-									OPERATING SYSTEM
-								</Typography.Text>
-								<Typography.Text
-									type="secondary"
-									className="host-details-metadata-label"
-								>
-									CPU USAGE
-								</Typography.Text>
-								<Typography.Text
-									type="secondary"
-									className="host-details-metadata-label"
-								>
-									MEMORY USAGE
-								</Typography.Text>
-							</div>
-
-							<div className="values-row">
-								<Tag
-									bordered
-									className={`infra-monitoring-tags ${
-										host.active ? 'active' : 'inactive'
-									}`}
-								>
-									{host.active ? 'ACTIVE' : 'INACTIVE'}
-								</Tag>
-								{host.os ? (
-									<Tag className="infra-monitoring-tags" bordered>
-										{host.os}
-									</Tag>
-								) : (
-									<Typography.Text>-</Typography.Text>
-								)}
-								<div className="progress-container">
-									<Progress
-										percent={Number((host.cpu * 100).toFixed(1))}
-										size="small"
-										strokeColor={((): string => {
-											const cpuPercent = Number((host.cpu * 100).toFixed(1));
-											if (cpuPercent >= 90) {
-												return Color.BG_SAKURA_500;
-											}
-											if (cpuPercent >= 60) {
-												return Color.BG_AMBER_500;
-											}
-											return Color.BG_FOREST_500;
-										})()}
-										className="progress-bar"
-									/>
-								</div>
-								<div className="progress-container">
-									<Progress
-										percent={Number((host.memory * 100).toFixed(1))}
-										size="small"
-										strokeColor={((): string => {
-											const memoryPercent = Number((host.memory * 100).toFixed(1));
-											if (memoryPercent >= 90) {
-												return Color.BG_CHERRY_500;
-											}
-											if (memoryPercent >= 60) {
-												return Color.BG_AMBER_500;
-											}
-											return Color.BG_FOREST_500;
-										})()}
-										className="progress-bar"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className="views-tabs-container">
-						<Radio.Group
-							className="views-tabs"
-							onChange={handleTabChange}
-							value={selectedView}
-						>
-							<Radio.Button
-								className={
-									selectedView === VIEW_TYPES.METRICS ? 'selected_view tab' : 'tab'
-								}
-								value={VIEW_TYPES.METRICS}
-							>
-								<div className="view-title">
-									<BarChart2 size={14} />
-									Metrics
-								</div>
-							</Radio.Button>
-							<Radio.Button
-								className={
-									selectedView === VIEW_TYPES.LOGS ? 'selected_view tab' : 'tab'
-								}
-								value={VIEW_TYPES.LOGS}
-							>
-								<div className="view-title">
-									<ScrollText size={14} />
-									Logs
-								</div>
-							</Radio.Button>
-							<Radio.Button
-								className={
-									selectedView === VIEW_TYPES.TRACES ? 'selected_view tab' : 'tab'
-								}
-								value={VIEW_TYPES.TRACES}
-							>
-								<div className="view-title">
-									<DraftingCompass size={14} />
-									Traces
-								</div>
-							</Radio.Button>
-							<Radio.Button
-								className={
-									selectedView === VIEW_TYPES.CONTAINERS ? 'selected_view tab' : 'tab'
-								}
-								value={VIEW_TYPES.CONTAINERS}
-							>
-								<div className="view-title">
-									<Package2 size={14} />
-									Containers
-								</div>
-							</Radio.Button>
-							<Radio.Button
-								className={
-									selectedView === VIEW_TYPES.PROCESSES ? 'selected_view tab' : 'tab'
-								}
-								value={VIEW_TYPES.PROCESSES}
-							>
-								<div className="view-title">
-									<ChevronsLeftRight size={14} />
-									Processes
-								</div>
-							</Radio.Button>
-						</Radio.Group>
-
-						{(selectedView === VIEW_TYPES.LOGS ||
-							selectedView === VIEW_TYPES.TRACES) && (
-							<Button
-								icon={<Compass size={18} />}
-								className="compass-button"
-								onClick={handleExplorePagesRedirect}
-							/>
-						)}
-					</div>
-
-					{selectedView === VIEW_TYPES.METRICS && (
-						<Metrics
-							selectedInterval={selectedInterval}
-							hostName={host.hostName}
-							timeRange={modalTimeRange}
-							handleTimeChange={handleTimeChange}
-							isModalTimeSelection={isModalTimeSelection}
-						/>
-					)}
-					{selectedView === VIEW_TYPES.LOGS && (
-						<HostMetricLogsDetailedView
-							timeRange={modalTimeRange}
-							isModalTimeSelection={isModalTimeSelection}
-							handleTimeChange={handleTimeChange}
-							handleChangeLogFilters={handleChangeLogFilters}
-							logFilters={logFilters}
-							selectedInterval={selectedInterval}
-						/>
-					)}
-					{selectedView === VIEW_TYPES.TRACES && (
-						<HostMetricTraces
-							timeRange={modalTimeRange}
-							isModalTimeSelection={isModalTimeSelection}
-							handleTimeChange={handleTimeChange}
-							handleChangeTracesFilters={handleChangeTracesFilters}
-							tracesFilters={tracesFilters}
-							selectedInterval={selectedInterval}
-						/>
-					)}
-
-					{selectedView === VIEW_TYPES.CONTAINERS && <Containers />}
-					{selectedView === VIEW_TYPES.PROCESSES && <Processes />}
-				</>
-			)}
-		</Drawer>
-	);
-}
-
-export default HostMetricsDetails;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -1,119 +0,0 @@
-.host-metrics-logs-container {
-	margin-top: 1rem;
-
-	.filter-section {
-		flex: 1;
-
-		.ant-select-selector {
-			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
-
-			input {
-				font-size: 12px;
-			}
-
-			.ant-tag .ant-typography {
-				font-size: 12px;
-			}
-		}
-	}
-
-	.host-metrics-logs-header {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-
-		padding: 12px;
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-	}
-
-	.host-metrics-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(--l1-border);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background: var(--l1-border);
-			}
-
-			.ant-row {
-				width: fit-content;
-			}
-		}
-
-		.skeleton-container {
-			height: 100%;
-			padding: 16px;
-		}
-	}
-}
-
-.host-metrics-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;
-	}
-}
-
-.host-metrics-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/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -1,100 +0,0 @@
-import { useMemo } from 'react';
-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 { VIEWS } from '../constants';
-import HostMetricsLogs from './HostMetricsLogs';
-
-import './HostMetricLogs.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;
-}
-
-function HostMetricLogsDetailedView({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	handleChangeLogFilters,
-	logFilters,
-	selectedInterval,
-}: 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:
-								logFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
-								[],
-							op: 'AND',
-						},
-					},
-				],
-			},
-		}),
-		[currentQuery, logFilters?.items],
-	);
-
-	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
-
-	return (
-		<div className="host-metrics-logs-container">
-			<div className="host-metrics-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>
-			<HostMetricsLogs timeRange={timeRange} filters={logFilters} />
-		</div>
-	);
-}
-
-export default HostMetricLogsDetailedView;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,187 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
-import RawLogView from 'components/Logs/RawLogView';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import LogsError from 'container/LogsError/LogsError';
-import { LogsLoading } from 'container/LogsLoading/LogsLoading';
-import { FontSize } from 'container/OptionsMenu/types';
-import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { ILog } from 'types/api/logs/log';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getHostLogsQueryPayload } from './constants';
-import NoLogsContainer from './NoLogsContainer';
-
-import './HostMetricLogs.styles.scss';
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	filters: IBuilderQuery['filters'];
-}
-
-function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
-	const basePayload = getHostLogsQueryPayload(
-		timeRange.startTime,
-		timeRange.endTime,
-		filters,
-	);
-	const {
-		logs,
-		hasReachedEndOfLogs,
-		isPaginating,
-		currentPage,
-		setIsPaginating,
-		handleNewData,
-		loadMoreLogs,
-		queryPayload,
-	} = useHandleLogsPagination({
-		timeRange,
-		filters,
-		excludeFilterKeys: ['host.name'],
-		basePayload,
-	});
-
-	const { data, isLoading, isFetching, isError } = useQuery({
-		queryKey: [
-			'hostMetricsLogs',
-			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 handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
-	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
-	);
-
-	const renderFooter = useCallback(
-		(): JSX.Element | null => (
-			<>
-				{isFetching ? (
-					<div className="logs-loading-skeleton"> Loading more logs ... </div>
-				) : hasReachedEndOfLogs ? (
-					<div className="logs-loading-skeleton"> *** End *** </div>
-				) : null}
-			</>
-		),
-		[isFetching, hasReachedEndOfLogs],
-	);
-
-	const renderContent = useMemo(
-		() => (
-			<Card bordered={false} className="host-metrics-logs-list-card">
-				<OverlayScrollbar isVirtuoso>
-					<Virtuoso
-						className="host-metrics-logs-virtuoso"
-						key="host-metrics-logs-virtuoso"
-						ref={virtuosoRef}
-						data={logs}
-						endReached={loadMoreLogs}
-						totalCount={logs.length}
-						itemContent={getItemContent}
-						overscan={200}
-						components={{
-							Footer: renderFooter,
-						}}
-					/>
-				</OverlayScrollbar>
-			</Card>
-		),
-		[logs, loadMoreLogs, getItemContent, renderFooter],
-	);
-
-	return (
-		<div className="host-metrics-logs">
-			{isLoading && <LogsLoading />}
-			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
-			{isError && !isLoading && <LogsError />}
-			{!isLoading && !isError && logs.length > 0 && (
-				<div
-					className="host-metrics-logs-list-container"
-					data-log-detail-ignore="true"
-				>
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HostMetricsLogs;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/NoLogsContainer.tsx

@@ -1,16 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Typography } from 'antd';
-import { Ghost } from 'lucide-react';
-
-const { Text } = Typography;
-
-export default function NoLogsContainer(): React.ReactElement {
-	return (
-		<div className="no-logs-found">
-			<Text type="secondary">
-				<Ghost size={24} color={Color.BG_AMBER_500} /> No logs found for this host
-				in the selected time range.
-			</Text>
-		</div>
-	);
-}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -1,61 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-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, ReduceOperators } from 'types/common/queryBuilder';
-import { v4 as uuidv4 } from 'uuid';
-
-export const getHostLogsQueryPayload = (
-	start: number,
-	end: number,
-	filters: IBuilderQuery['filters'],
-): GetQueryResultsProps => ({
-	graphType: PANEL_TYPES.LIST,
-	selectedTime: 'GLOBAL_TIME',
-	query: {
-		clickhouse_sql: [],
-		promql: [],
-		builder: {
-			queryData: [
-				{
-					dataSource: DataSource.LOGS,
-					queryName: 'A',
-					aggregateOperator: 'noop',
-					aggregateAttribute: {
-						id: '------false',
-						dataType: DataTypes.String,
-						key: '',
-						type: '',
-					},
-					timeAggregation: 'rate',
-					spaceAggregation: 'sum',
-					functions: [],
-					filters,
-					expression: 'A',
-					disabled: false,
-					stepInterval: 60,
-					having: [],
-					limit: null,
-					orderBy: [
-						{
-							columnName: 'timestamp',
-							order: 'desc',
-						},
-					],
-					groupBy: [],
-					legend: '',
-					reduceTo: ReduceOperators.AVG,
-					offset: 0,
-					pageSize: 100,
-				},
-			],
-			queryFormulas: [],
-			queryTraceOperator: [],
-		},
-		id: uuidv4(),
-		queryType: EQueryType.QUERY_BUILDER,
-	},
-	start,
-	end,
-});

frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss

@@ -1,45 +0,0 @@
-.empty-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
-
-.host-metrics-container {
-	margin-top: 1rem;
-}
-
-.metrics-header {
-	display: flex;
-	justify-content: flex-end;
-	margin-top: 1rem;
-
-	gap: 8px;
-	padding: 12px;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-}
-
-.host-metrics-card {
-	margin: 8px 0 1rem 0;
-	height: 300px;
-	padding: 10px;
-
-	border: 1px solid var(--l1-border);
-
-	.ant-card-body {
-		padding: 0;
-	}
-
-	.chart-container {
-		width: 100%;
-		height: 100%;
-	}
-
-	.no-data-container {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -1,233 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
-import { Card, Col, Row, Skeleton, Typography } from 'antd';
-import cx from 'classnames';
-import Uplot from 'components/Uplot';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import {
-	getHostQueryPayload,
-	hostWidgetInfo,
-} from 'container/LogDetailedView/InfraMetrics/constants';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { FeatureKeys } from '../../../constants/features';
-import { useAppContext } from '../../../providers/App/App';
-
-import './Metrics.styles.scss';
-
-interface MetricsTabProps {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
-
-	hostName: string;
-}
-
-function Metrics({
-	selectedInterval,
-	hostName,
-	timeRange,
-	handleTimeChange,
-	isModalTimeSelection,
-}: MetricsTabProps): JSX.Element {
-	const { featureFlags } = useAppContext();
-	const dotMetricsEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
-			?.active || false;
-
-	const {
-		visibilities,
-		setElement,
-	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
-
-	const legendScrollPositionRef = useRef<{
-		scrollTop: number;
-		scrollLeft: number;
-	}>({
-		scrollTop: 0,
-		scrollLeft: 0,
-	});
-
-	const queryPayloads = useMemo(
-		() =>
-			getHostQueryPayload(
-				hostName,
-				timeRange.startTime,
-				timeRange.endTime,
-				dotMetricsEnabled,
-			),
-		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
-	);
-
-	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
-			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
-			queryFn: ({
-				signal,
-			}: QueryFunctionContext): Promise<
-				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
-			enabled: !!payload && visibilities[index],
-			keepPreviousData: true,
-		})),
-	);
-
-	const isDarkMode = useIsDarkMode();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const dimensions = useResizeObserver(graphRef);
-	const { currentQuery } = useQueryBuilder();
-
-	const chartData = useMemo(
-		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
-		[queries],
-	);
-
-	const [graphTimeIntervals, setGraphTimeIntervals] = useState<
-		{
-			start: number;
-			end: number;
-		}[]
-	>(
-		new Array(queries.length).fill({
-			start: timeRange.startTime,
-			end: timeRange.endTime,
-		}),
-	);
-
-	useEffect(() => {
-		setGraphTimeIntervals(
-			new Array(queries.length).fill({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-			}),
-		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [timeRange]);
-
-	const onDragSelect = useCallback(
-		(start: number, end: number, graphIndex: number) => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			setGraphTimeIntervals((prev) => {
-				const newIntervals = [...prev];
-				newIntervals[graphIndex] = {
-					start: Math.floor(startTimestamp / 1000),
-					end: Math.floor(endTimestamp / 1000),
-				};
-				return newIntervals;
-			});
-		},
-		[],
-	);
-
-	const options = useMemo(
-		() =>
-			queries.map(({ data }, idx) =>
-				getUPlotChartOptions({
-					apiResponse: data?.payload,
-					isDarkMode,
-					dimensions,
-					yAxisUnit: hostWidgetInfo[idx].yAxisUnit,
-					softMax: null,
-					softMin: null,
-					minTimeScale: graphTimeIntervals[idx].start,
-					maxTimeScale: graphTimeIntervals[idx].end,
-					onDragSelect: (start, end) => onDragSelect(start, end, idx),
-					query: currentQuery,
-					legendScrollPosition: legendScrollPositionRef.current,
-					setLegendScrollPosition: (position: {
-						scrollTop: number;
-						scrollLeft: number;
-					}) => {
-						legendScrollPositionRef.current = position;
-					},
-				}),
-			),
-		[
-			queries,
-			isDarkMode,
-			dimensions,
-			graphTimeIntervals,
-			onDragSelect,
-			currentQuery,
-		],
-	);
-
-	const renderCardContent = (
-		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
-		idx: number,
-	): JSX.Element => {
-		if ((!query.data && query.isLoading) || !visibilities[idx]) {
-			return <Skeleton />;
-		}
-
-		if (query.error) {
-			const errorMessage =
-				(query.error as Error)?.message || 'Something went wrong';
-			return <div>{errorMessage}</div>;
-		}
-		return (
-			<div
-				className={cx('chart-container', {
-					'no-data-container':
-						!query.isLoading && !query?.data?.payload?.data?.result?.length,
-				})}
-			>
-				<Uplot options={options[idx]} data={chartData[idx]} />
-			</div>
-		);
-	};
-
-	return (
-		<>
-			<div className="metrics-header">
-				<div className="metrics-datetime-section">
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						isModalTimeSelection={isModalTimeSelection}
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
-					/>
-				</div>
-			</div>
-			<Row gutter={24} className="host-metrics-container">
-				{queries.map((query, idx) => (
-					<Col ref={setElement(idx)} span={12} key={hostWidgetInfo[idx].title}>
-						<Typography.Text>{hostWidgetInfo[idx].title}</Typography.Text>
-						<Card bordered className="host-metrics-card" ref={graphRef}>
-							{renderCardContent(query, idx)}
-						</Card>
-					</Col>
-				))}
-			</Row>
-		</>
-	);
-}
-
-export default Metrics;

frontend/src/components/HostMetricsDetail/constants.ts

@@ -1,17 +0,0 @@
-export enum VIEWS {
-	METRICS = 'metrics',
-	LOGS = 'logs',
-	TRACES = 'traces',
-	CONTAINERS = 'containers',
-	PROCESSES = 'processes',
-	EVENTS = 'events',
-}
-
-export const VIEW_TYPES = {
-	METRICS: VIEWS.METRICS,
-	LOGS: VIEWS.LOGS,
-	TRACES: VIEWS.TRACES,
-	CONTAINERS: VIEWS.CONTAINERS,
-	PROCESSES: VIEWS.PROCESSES,
-	EVENTS: VIEWS.EVENTS,
-};

frontend/src/components/HostMetricsDetail/index.tsx

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

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,7 +5,6 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
-		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -37,6 +37,7 @@
 
 		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
 		border-right: none;
 		border-left: none;
@@ -46,6 +47,7 @@
 		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
 		line-height: 27px;
+
 		&::placeholder {
 			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
@@ -61,8 +63,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
 		height: 38px;
 		width: 38px;
 	}
@@ -71,7 +73,7 @@
 		.input {
 			border-radius: 0px 2px 2px 0px;
 			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
 import { Style } from '@signozhq/design-tokens';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	Callout,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
@@ -295,8 +298,9 @@ function InviteMembersModal({
 						showIcon
 						icon={<CircleAlert size={12} />}
 						className="invite-team-members-error-callout"
-						description={getValidationErrorMessage()}
-					/>
+					>
+						{getValidationErrorMessage()}
+					</Callout>
 				)}
 			</div>
 
@@ -306,7 +310,7 @@ function InviteMembersModal({
 					color="secondary"
 					size="sm"
 					className="add-another-member-button"
-					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
 					onClick={addRow}
 				>
 					Add another

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/MembersTable/MembersTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--background);
+			background: var(--l1-background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

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

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-builder-v2 {
 	display: flex;
 	flex-direction: row;
@@ -274,7 +276,7 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l3-background);
+						background: var(--l2-background);
 						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;

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

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-add-ons {
 	width: 100%;
 }
@@ -102,7 +104,7 @@
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--card) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
 						border-color: var(--l1-border);
@@ -211,7 +213,7 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--card) !important;
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
 						background: var(--l3-background) !important;
@@ -249,8 +251,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
 			height: 38px;
 			width: 38px;
 
@@ -284,108 +286,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.add-ons-list {
-		.add-ons-tabs {
-			.add-on-tab-title {
-				color: var(--l1-foreground) !important;
-			}
-
-			.tab {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
-
-				&:first-child {
-					border-left: 1px solid var(--l1-border) !important;
-				}
-			}
-
-			.tab::before {
-				background: var(--l3-background) !important;
-			}
-
-			.selected-view {
-				color: var(--primary-background) !important;
-				border: 1px solid var(--l1-border) !important;
-			}
-
-			.selected-view::before {
-				background: var(--l3-background) !important;
-			}
-		}
-
-		.compass-button {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
-		}
-	}
-
-	.having-filter-container {
-		.having-filter-select-container {
-			.having-filter-select-editor {
-				.cm-editor {
-					&:focus-within {
-						border-color: var(--l1-border) !important;
-					}
-
-					.cm-content {
-						border: 1px solid var(--l1-border) !important;
-						background: var(--l1-background) !important;
-
-						&:focus-within {
-							border-color: var(--l1-border) !important;
-						}
-					}
-
-					.cm-tooltip-autocomplete {
-						background: var(--l1-background) !important;
-						border: 1px solid var(--l1-border) !important;
-						color: var(--l1-foreground) !important;
-						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-						ul {
-							li {
-								color: var(--l1-foreground) !important;
-								&:hover {
-									background: var(--l3-background) !important;
-								}
-
-								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
-									font-weight: 600 !important;
-								}
-							}
-						}
-					}
-
-					.cm-line {
-						background-color: var(--l1-background) !important;
-
-						::-moz-selection {
-							background: var(--l1-background) !important;
-						}
-
-						::selection {
-							background: var(--l3-background) !important;
-						}
-
-						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
-						}
-					}
-
-					.cm-selectionBackground {
-						background: var(--l1-background) !important;
-					}
-				}
-			}
-
-			.close-btn {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
-			}
-		}
-	}
-}

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

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-aggregation-container {
 	display: block;
 
@@ -140,7 +142,7 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
 							background: var(--l3-background) !important;
@@ -196,6 +198,7 @@
 					min-width: auto;
 				}
 			}
+
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
 				border: 1px solid var(--l1-border);
@@ -270,7 +273,7 @@
 
 						.cm-line {
 							::-moz-selection {
-								background: var(--l1-background) !important;
+								background: var(--l2-background) !important;
 								opacity: 0.5 !important;
 							}
 

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

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .code-mirror-where-clause {
 	width: 100%;
 	display: flex;
@@ -156,7 +158,7 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l1-background) !important;
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
 				background: var(--l3-background) !important;
@@ -454,30 +456,3 @@
 		margin-top: -6px !important;
 	}
 }
-
-.lightMode {
-	.code-mirror-where-clause {
-		.cm-editor {
-			.cm-tooltip-autocomplete {
-				background: var(--l1-background) !important;
-				border: 1px solid var(--l1-border);
-				backdrop-filter: blur(20px);
-				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-			}
-
-			.cm-line {
-				::-moz-selection {
-					background: var(--bg-robin-200) !important;
-				}
-
-				::selection {
-					background: var(--bg-robin-200) !important;
-				}
-			}
-
-			.cm-selectionBackground {
-				background: var(--bg-robin-200) !important;
-			}
-		}
-	}
-}

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

@@ -158,12 +158,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,7 +11,7 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/combobox';
+} from '@signozhq/ui';
 import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -200,7 +200,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 												setOpen(false);
 											}}
 											isSelected={validQueryIndex === option.value}
-											showCheck={false}
 										>
 											{option.label}
 										</ComboboxItem>

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

@@ -1,7 +1,5 @@
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui';
+import { Badge, Button, Callout } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {
@@ -43,7 +41,7 @@ function KeyCreatedPhase({
 			<Callout
 				type="info"
 				showIcon
-				message="Store the key securely. This is the only time it will be displayed."
+				title="Store the key securely. This is the only time it will be displayed."
 			/>
 		</div>
 	);

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

@@ -1,8 +1,6 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button } from '@signozhq/button';
-import { Input } from '@signozhq/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -56,7 +54,7 @@ function KeyFormPhase({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onValueChange={(val): void => {
+								onChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -112,6 +110,7 @@ function KeyFormPhase({
 					</Button>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

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

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

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

@@ -1,10 +1,13 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Badge } from '@signozhq/ui';
+import {
+	Badge,
+	Button,
+	Input,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -72,7 +75,7 @@ function EditKeyForm({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onValueChange={(val): void => {
+								onChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -147,6 +150,7 @@ function EditKeyForm({
 					</Button>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

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

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/button';
 import { KeyRound, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
@@ -96,7 +96,7 @@ function buildColumns({
 				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
-						size="xs"
+						size="sm"
 						color="destructive"
 						disabled={isDisabled}
 						onClick={(e): void => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Badge } from '@signozhq/ui';
+import { Badge, Input } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
@@ -42,7 +42,7 @@ function SaveErrorItem({
 					<Button
 						type="button"
 						aria-label="Retry"
-						size="xs"
+						size="sm"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
 							setIsRetrying(true);

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

@@ -5,31 +5,21 @@
 		margin-left: var(--margin-2);
 	}
 
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
 	&__tabs {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
 		flex-shrink: 0;
 	}
 
 	&__tab-group {
 		[data-slot='toggle-group'] {
-			height: 32px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
 			gap: 0;
 		}
 
 		[data-slot='toggle-group-item'] {
-			height: 32px;
 			border-radius: 0;
 			border-left: 1px solid var(--l1-border);
 			background: transparent;
@@ -40,6 +30,7 @@
 			padding: 0 var(--padding-7);
 			gap: var(--spacing-3);
 			box-shadow: none;
+			border: none;
 
 			&:first-child {
 				border-left: none;
@@ -88,7 +79,7 @@
 	&__body {
 		flex: 1;
 		overflow-y: auto;
-		padding: var(--padding-5) var(--padding-4);
+		padding-top: var(--padding-5);
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
@@ -112,14 +103,11 @@
 	}
 
 	&__footer {
-		height: 56px;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--secondary);
-		background: var(--card);
+		width: 100%;
 	}
 
 	&__keys-pagination {

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	DrawerWrapper,
+	toast,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -379,7 +382,7 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onValueChange={(val): void => {
+					onChange={(val): void => {
 						if (val) {
 							setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -471,69 +474,71 @@ function ServiceAccountDrawer({
 					</>
 				)}
 			</div>
+		</div>
+	);
 
-			<div className="sa-drawer__footer">
-				{activeTab === ServiceAccountDrawerTab.Keys ? (
-					<Pagination
-						current={keysPage}
-						pageSize={PAGE_SIZE}
-						total={keys.length}
-						showTotal={(total: number, range: number[]): JSX.Element => (
-							<>
-								<span className="sa-drawer__pagination-range">
-									{range[0]} &#8212; {range[1]}
-								</span>
-								<span className="sa-drawer__pagination-total"> of {total}</span>
-							</>
-						)}
-						showSizeChanger={false}
-						hideOnSinglePage
-						onChange={(page): void => {
-							void setKeysPage(page);
-						}}
-						className="sa-drawer__keys-pagination"
-					/>
-				) : (
-					<>
-						{!isDeleted && (
+	const footer = (
+		<div className="sa-drawer__footer">
+			{activeTab === ServiceAccountDrawerTab.Keys ? (
+				<Pagination
+					current={keysPage}
+					pageSize={PAGE_SIZE}
+					total={keys.length}
+					showTotal={(total: number, range: number[]): JSX.Element => (
+						<>
+							<span className="sa-drawer__pagination-range">
+								{range[0]} &#8212; {range[1]}
+							</span>
+							<span className="sa-drawer__pagination-total"> of {total}</span>
+						</>
+					)}
+					showSizeChanger={false}
+					hideOnSinglePage
+					onChange={(page): void => {
+						void setKeysPage(page);
+					}}
+					className="sa-drawer__keys-pagination"
+				/>
+			) : (
+				<>
+					{!isDeleted && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							className="sa-drawer__footer-btn"
+							onClick={(): void => {
+								setIsDeleteOpen(true);
+							}}
+						>
+							<Trash2 size={12} />
+							Delete Service Account
+						</Button>
+					)}
+					{!isDeleted && (
+						<div className="sa-drawer__footer-right">
 							<Button
-								variant="ghost"
-								color="destructive"
-								className="sa-drawer__footer-btn"
-								onClick={(): void => {
-									setIsDeleteOpen(true);
-								}}
+								variant="solid"
+								color="secondary"
+								size="sm"
+								onClick={handleClose}
 							>
-								<Trash2 size={12} />
-								Delete Service Account
+								<X size={14} />
+								Cancel
 							</Button>
-						)}
-						{!isDeleted && (
-							<div className="sa-drawer__footer-right">
-								<Button
-									variant="solid"
-									color="secondary"
-									size="sm"
-									onClick={handleClose}
-								>
-									<X size={14} />
-									Cancel
-								</Button>
-								<Button
-									variant="solid"
-									color="primary"
-									size="sm"
-									loading={isSaving}
-									disabled={!isDirty}
-									onClick={handleSave}
-								>
-									Save Changes
-								</Button>
-							</div>
-						)}
-					</>
-				)}
-			</div>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
+						</div>
+					)}
+				</>
+			)}
 		</div>
 	);
 
@@ -547,14 +552,15 @@ function ServiceAccountDrawer({
 					}
 				}}
 				direction="right"
-				type="panel"
 				showCloseButton
 				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Service Account Details' }}
-				content={drawerContent}
+				title="Service Account Details"
 				className="sa-drawer"
-			/>
+				width="wide"
+				footer={footer}
+			>
+				{drawerContent}
+			</DrawerWrapper>
 
 			<DeleteAccountModal />
 

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

@@ -1,7 +1,13 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import {
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	waitForElementToBeRemoved,
+} from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -128,11 +134,9 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByRole('dialog', { name: /Add a New Key/i });
+		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /Add a New Key/i }),
-		).not.toBeInTheDocument();
+		await waitForElementToBeRemoved(dialog);
 	});
 });

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

@@ -29,9 +29,14 @@ function renderModal(
 		account: 'sa-1',
 		'edit-key': 'key-1',
 	},
+	onUrlUpdate?: jest.Mock,
 ): ReturnType<typeof render> {
 	return render(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+		<NuqsTestingAdapter
+			searchParams={searchParams}
+			hasMemory
+			onUrlUpdate={onUrlUpdate}
+		>
 			<EditKeyModal keyItem={keyItem} />
 		</NuqsTestingAdapter>,
 	);
@@ -97,14 +102,31 @@ describe('EditKeyModal (URL-controlled)', () => {
 
 	it('cancel clears edit-key param and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		renderModal();
+		const onUrlUpdate = jest.fn();
+		renderModal(mockKey, undefined, onUrlUpdate);
 
 		await screen.findByDisplayValue('Original Key Name');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-		).not.toBeInTheDocument();
+		await waitFor(() => {
+			expect(onUrlUpdate).toHaveBeenCalled();
+		});
+
+		const latestUrlUpdate =
+			onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]?.[0];
+		expect(latestUrlUpdate).toEqual(
+			expect.objectContaining({
+				queryString: expect.any(String),
+			}),
+		);
+		expect(latestUrlUpdate.queryString).toContain('account=sa-1');
+		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+			).not.toBeInTheDocument();
+		});
 	});
 
 	it('revoke flow: clicking Revoke Key shows confirmation inside same dialog', async () => {

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

@@ -6,18 +6,15 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
-}));
-
 jest.mock('@signozhq/ui', () => ({
 	...jest.requireActual('@signozhq/ui'),
+	DrawerWrapper: ({
+		children,
+		open,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{children}</div> : null),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

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

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--background);
+			background: var(--l1-background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -11,7 +11,7 @@
 		gap: 20px;
 		padding: 8px 12px;
 
-		background: var(--background);
+		background: var(--l1-background);
 		color: var(--l2-foreground);
 
 		border-radius: 8px;

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,11 +1,11 @@
 .warning-content {
 	display: flex;
 	flex-direction: column;
+
 	// === SECTION: Summary (Top)
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -161,10 +161,11 @@ describe('CmdKPalette', () => {
 	});
 
 	test('clicking a navigation item calls history.push with correct route', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
-		await userEvent.click(homeItem);
+		await user.click(homeItem);
 
 		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
 	});
@@ -194,10 +195,11 @@ describe('CmdKPalette', () => {
 	});
 
 	test('closing the palette via handleInvoke sets open to false', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const dashItem = screen.getByText('Go to Dashboards');
-		await userEvent.click(dashItem);
+		await user.click(dashItem);
 
 		// last call from handleInvoke should set open to false
 		expect(mockSetOpen).toHaveBeenCalledWith(false);

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] {
@@ -33,7 +41,7 @@
 
 .cmdk-item-light:hover {
 	cursor: pointer;
-	background-color: var(--background) !important;
+	background-color: var(--l1-background) !important;
 }
 
 .cmdk-item-light[data-selected='true'] {
@@ -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/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/command';
+} from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

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/AppLayout/AppLayout.styles.scss

@@ -50,6 +50,7 @@
 	.app-content {
 		width: calc(100% - 54px); // width of the sidebar
 		z-index: 0;
+		background: var(--l1-background);
 
 		margin: 0 auto;
 
@@ -139,22 +140,6 @@
 	}
 }
 
-.isDarkMode {
-	.app-layout {
-		.app-content {
-			background: var(--background);
-		}
-	}
-}
-
-.isLightMode {
-	.app-layout {
-		.app-content {
-			background: var(--card);
-		}
-	}
-}
-
 .trial-expiry-banner,
 .slow-api-warning-banner,
 .workspace-restricted-banner {

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,
-		});
-	});
-});