feat(base-path): migrate backend bound urls and eslint upgrade to error

Restructure Validate nil check, rename expectErr to fail with
early-return, trim trailing newlines in test assertions, remove
t.Parallel from subtests, inline short config literals, restore
struct field comments in web.Config.

docs/api/openapi.yml

@@ -668,8 +668,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
+      required:
+      - aws
       type: object
     CloudintegrationtypesAgentReport:
       nullable: true
@@ -693,87 +693,6 @@ components:
           nullable: true
           type: array
       type: object
-    CloudintegrationtypesAzureAccountConfig:
-      properties:
-        deploymentRegion:
-          type: string
-        resourceGroups:
-          items:
-            type: string
-          type: array
-      required:
-      - deploymentRegion
-      - resourceGroups
-      type: object
-    CloudintegrationtypesAzureConnectionArtifact:
-      properties:
-        cliCommand:
-          type: string
-        cloudPowerShellCommand:
-          type: string
-      required:
-      - cliCommand
-      - cloudPowerShellCommand
-      type: object
-    CloudintegrationtypesAzureIntegrationConfig:
-      properties:
-        deploymentRegion:
-          type: string
-        resourceGroups:
-          items:
-            type: string
-          type: array
-        telemetryCollectionStrategy:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
-          type: array
-      required:
-      - deploymentRegion
-      - resourceGroups
-      - telemetryCollectionStrategy
-      type: object
-    CloudintegrationtypesAzureLogsCollectionStrategy:
-      properties:
-        categoryGroups:
-          items:
-            type: string
-          type: array
-      required:
-      - categoryGroups
-      type: object
-    CloudintegrationtypesAzureMetricsCollectionStrategy:
-      type: object
-    CloudintegrationtypesAzureServiceConfig:
-      properties:
-        logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceLogsConfig'
-        metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceMetricsConfig'
-      required:
-      - logs
-      - metrics
-      type: object
-    CloudintegrationtypesAzureServiceLogsConfig:
-      properties:
-        enabled:
-          type: boolean
-      type: object
-    CloudintegrationtypesAzureServiceMetricsConfig:
-      properties:
-        enabled:
-          type: boolean
-      type: object
-    CloudintegrationtypesAzureTelemetryCollectionStrategy:
-      properties:
-        logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureLogsCollectionStrategy'
-        metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureMetricsCollectionStrategy'
-        resourceType:
-          type: string
-      required:
-      - resourceType
-      type: object
     CloudintegrationtypesCloudIntegrationService:
       nullable: true
       properties:
@@ -818,8 +737,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifact'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureConnectionArtifact'
+      required:
+      - aws
       type: object
     CloudintegrationtypesCredentials:
       properties:
@@ -991,8 +910,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
+      required:
+      - aws
       type: object
     CloudintegrationtypesPostableAgentCheckIn:
       properties:
@@ -1015,8 +934,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSIntegrationConfig'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureIntegrationConfig'
+      required:
+      - aws
       type: object
     CloudintegrationtypesService:
       properties:
@@ -1053,8 +972,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSServiceConfig'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
+      required:
+      - aws
       type: object
     CloudintegrationtypesServiceID:
       enum:
@@ -1071,8 +990,6 @@ components:
       - s3sync
       - sns
       - sqs
-      - blobstorage
-      - frontdoor
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -1101,32 +1018,16 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
+      required:
+      - aws
       type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
-          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAccountConfig'
+          $ref: '#/components/schemas/CloudintegrationtypesAccountConfig'
       required:
       - config
       type: object
-    CloudintegrationtypesUpdatableAccountConfig:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
-        azure:
-          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAzureAccountConfig'
-      type: object
-    CloudintegrationtypesUpdatableAzureAccountConfig:
-      properties:
-        resourceGroups:
-          items:
-            type: string
-          type: array
-      required:
-      - resourceGroups
-      type: object
     CloudintegrationtypesUpdatableService:
       properties:
         config:

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

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

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns
+		'rulesdir/no-raw-absolute-path': 'error',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned
@@ -246,6 +248,8 @@ module.exports = {
 				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
 				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
 				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
+				// Test assertions intentionally reference window.location.origin for expected-value checks
+				'rulesdir/no-raw-absolute-path': 'off',
 			},
 		},
 		{

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

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

frontend/index.html

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

frontend/package.json

@@ -62,8 +62,7 @@
     "@signozhq/popover": "0.1.2",
     "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/tabs": "0.0.11",
-    "@signozhq/table": "0.3.8",
+    "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.3",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/ReactI18/index.tsx

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

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

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

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

@@ -795,8 +795,7 @@ export interface CloudintegrationtypesAccountDTO {
 }
 
 export interface CloudintegrationtypesAccountConfigDTO {
-	aws?: CloudintegrationtypesAWSAccountConfigDTO;
-	azure?: CloudintegrationtypesAzureAccountConfigDTO;
+	aws: CloudintegrationtypesAWSAccountConfigDTO;
 }
 
 /**
@@ -830,82 +829,6 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
-export interface CloudintegrationtypesAzureAccountConfigDTO {
-	/**
-	 * @type string
-	 */
-	deploymentRegion: string;
-	/**
-	 * @type array
-	 */
-	resourceGroups: string[];
-}
-
-export interface CloudintegrationtypesAzureConnectionArtifactDTO {
-	/**
-	 * @type string
-	 */
-	cliCommand: string;
-	/**
-	 * @type string
-	 */
-	cloudPowerShellCommand: string;
-}
-
-export interface CloudintegrationtypesAzureIntegrationConfigDTO {
-	/**
-	 * @type string
-	 */
-	deploymentRegion: string;
-	/**
-	 * @type array
-	 */
-	resourceGroups: string[];
-	/**
-	 * @type array
-	 */
-	telemetryCollectionStrategy: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO[];
-}
-
-export interface CloudintegrationtypesAzureLogsCollectionStrategyDTO {
-	/**
-	 * @type array
-	 */
-	categoryGroups: string[];
-}
-
-export interface CloudintegrationtypesAzureMetricsCollectionStrategyDTO {
-	[key: string]: unknown;
-}
-
-export interface CloudintegrationtypesAzureServiceConfigDTO {
-	logs: CloudintegrationtypesAzureServiceLogsConfigDTO;
-	metrics: CloudintegrationtypesAzureServiceMetricsConfigDTO;
-}
-
-export interface CloudintegrationtypesAzureServiceLogsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-}
-
-export interface CloudintegrationtypesAzureServiceMetricsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-}
-
-export interface CloudintegrationtypesAzureTelemetryCollectionStrategyDTO {
-	logs?: CloudintegrationtypesAzureLogsCollectionStrategyDTO;
-	metrics?: CloudintegrationtypesAzureMetricsCollectionStrategyDTO;
-	/**
-	 * @type string
-	 */
-	resourceType: string;
-}
-
 /**
  * @nullable
  */
@@ -967,8 +890,7 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 }
 
 export interface CloudintegrationtypesConnectionArtifactDTO {
-	aws?: CloudintegrationtypesAWSConnectionArtifactDTO;
-	azure?: CloudintegrationtypesAzureConnectionArtifactDTO;
+	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
 }
 
 export interface CloudintegrationtypesCredentialsDTO {
@@ -1150,8 +1072,7 @@ export interface CloudintegrationtypesPostableAccountDTO {
 }
 
 export interface CloudintegrationtypesPostableAccountConfigDTO {
-	aws?: CloudintegrationtypesAWSPostableAccountConfigDTO;
-	azure?: CloudintegrationtypesAzureAccountConfigDTO;
+	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
 }
 
 /**
@@ -1186,8 +1107,7 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 }
 
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
-	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
-	azure?: CloudintegrationtypesAzureIntegrationConfigDTO;
+	aws: CloudintegrationtypesAWSIntegrationConfigDTO;
 }
 
 export interface CloudintegrationtypesServiceDTO {
@@ -1215,8 +1135,7 @@ export interface CloudintegrationtypesServiceDTO {
 }
 
 export interface CloudintegrationtypesServiceConfigDTO {
-	aws?: CloudintegrationtypesAWSServiceConfigDTO;
-	azure?: CloudintegrationtypesAzureServiceConfigDTO;
+	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }
 
 export enum CloudintegrationtypesServiceIDDTO {
@@ -1233,8 +1152,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	s3sync = 's3sync',
 	sns = 'sns',
 	sqs = 'sqs',
-	blobstorage = 'blobstorage',
-	frontdoor = 'frontdoor',
 }
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
@@ -1267,24 +1184,11 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 }
 
 export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
+	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
 }
 
 export interface CloudintegrationtypesUpdatableAccountDTO {
-	config: CloudintegrationtypesUpdatableAccountConfigDTO;
-}
-
-export interface CloudintegrationtypesUpdatableAccountConfigDTO {
-	aws?: CloudintegrationtypesAWSAccountConfigDTO;
-	azure?: CloudintegrationtypesUpdatableAzureAccountConfigDTO;
-}
-
-export interface CloudintegrationtypesUpdatableAzureAccountConfigDTO {
-	/**
-	 * @type array
-	 */
-	resourceGroups: string[];
+	config: CloudintegrationtypesAccountConfigDTO;
 }
 
 export interface CloudintegrationtypesUpdatableServiceDTO {

frontend/src/api/generatedAPIInstance.ts

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

frontend/src/api/index.ts

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

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

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

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

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

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

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

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

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

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

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

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

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -31,6 +31,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';
 
 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -387,7 +388,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

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

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

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

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -330,10 +331,7 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -352,10 +350,7 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -14,6 +14,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -188,7 +189,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -196,7 +197,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

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

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

frontend/src/components/cmdKPalette/cmdKPalette.scss

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

frontend/src/constants/routes.ts

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

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

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

frontend/src/container/AppLayout/index.tsx

@@ -73,6 +73,7 @@ import {
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
@@ -461,7 +462,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -31,6 +31,7 @@ import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
@@ -324,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			updateCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -333,7 +334,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			manageCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,109 @@
+import { useRef } from 'react';
+import { Form } from 'antd';
+import cx from 'classnames';
+import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
+import { AccountStatusResponse } from 'types/api/integrations/aws';
+import { regions } from 'utils/regions';
+
+import logEvent from '../../../../api/common/logEvent';
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} from './IntegrateNowFormSections';
+import RenderConnectionFields from './RenderConnectionParams';
+
+const allRegions = (): string[] =>
+	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
+
+const getRegionPreviewText = (regions: string[]): string[] => {
+	if (regions.includes('all')) {
+		return allRegions();
+	}
+	return regions;
+};
+
+export function RegionForm({
+	form,
+	modalState,
+	setModalState,
+	selectedRegions,
+	includeAllRegions,
+	onIncludeAllRegionsChange,
+	onRegionSelect,
+	onSubmit,
+	accountId,
+	selectedDeploymentRegion,
+	handleRegionChange,
+	connectionParams,
+	isConnectionParamsLoading,
+}: RegionFormProps): JSX.Element {
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
+		refetchInterval,
+		enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+		onSuccess: (data: AccountStatusResponse) => {
+			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+				setModalState(ModalStateEnum.SUCCESS);
+				logEvent('AWS Integration: Account connected', {
+					cloudAccountId: data?.data?.cloud_account_id,
+					status: data?.data?.status,
+				});
+			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+				setModalState(ModalStateEnum.ERROR);
+				logEvent('AWS Integration: Account connection attempt timed out', {
+					id: accountId,
+				});
+			}
+		},
+		onError: () => {
+			setModalState(ModalStateEnum.ERROR);
+		},
+	});
+
+	const isFormDisabled =
+		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+	return (
+		<Form
+			form={form}
+			className="cloud-account-setup-form"
+			layout="vertical"
+			onFinish={onSubmit}
+		>
+			<AlertMessage modalState={modalState} />
+
+			<div
+				className={cx(`cloud-account-setup-form__content`, {
+					disabled: isFormDisabled,
+				})}
+			>
+				<RegionDeploymentSection
+					regions={regions}
+					handleRegionChange={handleRegionChange}
+					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
+				/>
+				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
+					selectedRegions={selectedRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
+				/>
+				<ComplianceNote />
+				<RenderConnectionFields
+					isConnectionParamsLoading={isConnectionParamsLoading}
+					connectionParams={connectionParams}
+					isFormDisabled={isFormDisabled}
+				/>
+			</div>
+		</Form>
+	);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
+import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useNotifications } from 'hooks/useNotifications';
+import { X } from 'lucide-react';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
+
+import './RemoveIntegrationAccount.scss';
+
+function RemoveIntegrationAccount({
+	accountId,
+	onRemoveIntegrationAccountSuccess,
+}: {
+	accountId: string;
+	onRemoveIntegrationAccountSuccess: () => void;
+}): JSX.Element {
+	const { notifications } = useNotifications();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const showModal = (): void => {
+		setIsModalOpen(true);
+	};
+
+	const {
+		mutate: removeIntegration,
+		isLoading: isRemoveIntegrationLoading,
+	} = useMutation(removeAwsIntegrationAccount, {
+		onSuccess: () => {
+			onRemoveIntegrationAccountSuccess?.();
+			setIsModalOpen(false);
+		},
+		onError: () => {
+			notifications.error({
+				message: SOMETHING_WENT_WRONG,
+			});
+		},
+	});
+	const handleOk = (): void => {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
+			accountId,
+		});
+		removeIntegration(accountId);
+	};
+
+	const handleCancel = (): void => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<div className="remove-integration-account">
+			<div className="remove-integration-account__header">
+				<div className="remove-integration-account__title">Remove Integration</div>
+				<div className="remove-integration-account__subtitle">
+					Removing this integration won&apos;t delete any existing data but will stop
+					collecting new data from AWS.
+				</div>
+			</div>
+			<Button
+				className="remove-integration-account__button"
+				icon={<X size={14} />}
+				onClick={(): void => showModal()}
+			>
+				Remove
+			</Button>
+			<Modal
+				className="remove-integration-modal"
+				open={isModalOpen}
+				title="Remove integration"
+				onOk={handleOk}
+				onCancel={handleCancel}
+				okText="Remove Integration"
+				okButtonProps={{
+					danger: true,
+					disabled: isRemoveIntegrationLoading,
+				}}
+			>
+				<div className="remove-integration-modal__text">
+					Removing this account will remove all components created for sending
+					telemetry to SigNoz in your AWS account within the next ~15 minutes
+					(cloudformation stacks named signoz-integration-telemetry-collection in
+					enabled regions). <br />
+					<br />
+					After that, you can delete the cloudformation stack that was created
+					manually when connecting this account.
+				</div>
+			</Modal>
+		</div>
+	);
+}
+
+export default RemoveIntegrationAccount;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -55,7 +56,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});
 
-		window.open(url, '_blank');
+		openInNewTab(url);
 	}
 	const renderOptions = useMemo(
 		() => (

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

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

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -48,6 +48,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// eslint-disable-next-line rulesdir/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -16,6 +16,8 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -213,7 +215,7 @@ function PublicDashboardSetting(): JSX.Element {
 
 		try {
 			setCopyPublicDashboardURL(
-				`${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+				getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 			);
 			toast.success('Copied Public Dashboard URL successfully');
 		} catch (error) {
@@ -222,7 +224,7 @@ function PublicDashboardSetting(): JSX.Element {
 	};
 
 	const publicDashboardURL = useMemo(
-		() => `${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+		() => getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 		[publicDashboardResponse],
 	);
 
@@ -294,7 +296,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>

frontend/src/container/ForgotPassword/index.tsx

@@ -10,6 +10,7 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+import { getBaseUrl } from 'utils/basePath';
 
 import tvUrl from '@/assets/svgs/tv.svg';
 
@@ -105,7 +106,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);

frontend/src/container/FormAlertRules/BasicInfo.tsx

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

frontend/src/container/FormAlertRules/index.tsx

@@ -46,6 +46,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openInNewTab } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -771,7 +772,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}
 

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

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

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openInNewTab } from 'utils/navigation';
 
 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -51,7 +52,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
+			openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};
 

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import './HomeChecklist.styles.scss';
 
@@ -99,11 +100,7 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															window?.open(
-																item.docsLink || '',
-																'_blank',
-																'noopener noreferrer',
-															);
+															openInNewTab(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openInNewTab(item.docsLink ?? '');
 														}}
 													>
 														<BookOpenText size={16} />

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -31,6 +31,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -79,11 +80,7 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									window?.open(
-										DOCS_LINKS.ADD_DATA_SOURCE,
-										'_blank',
-										'noopener noreferrer',
-									);
+									openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -17,6 +17,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -133,11 +134,7 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
+										openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>

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

@@ -49,6 +49,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import ClusterEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -414,10 +415,7 @@ function ClusterDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -436,10 +434,7 @@ function ClusterDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -48,6 +48,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DaemonSetEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -429,10 +430,7 @@ function DaemonSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -451,10 +449,7 @@ function DaemonSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DeploymentEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -433,10 +434,7 @@ function DeploymentDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -455,10 +453,7 @@ function DeploymentDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -48,6 +48,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import JobEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -427,10 +428,7 @@ function JobDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -449,10 +447,7 @@ function JobDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NamespaceEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -419,10 +420,7 @@ function NamespaceDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -441,10 +439,7 @@ function NamespaceDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NodeLogs from '../../EntityDetailsUtils/EntityLogs';
@@ -416,10 +417,7 @@ function NodeDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -438,10 +436,7 @@ function NodeDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import PodEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -435,10 +436,7 @@ function PodDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -457,10 +455,7 @@ function PodDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

@@ -53,6 +53,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -431,10 +432,7 @@ function StatefulSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -453,10 +451,7 @@ function StatefulSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,113 +0,0 @@
-.aws-service-dashboards {
-	border-radius: 6px;
-	border: 1px solid var(--l3-background);
-	background: var(--l1-background);
-
-	.aws-service-dashboards-title {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 8px;
-
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-
-		padding: 8px 16px;
-		border-bottom: 1px solid var(--l3-background);
-	}
-
-	.aws-service-dashboards-items {
-		display: flex;
-		flex-direction: column;
-
-		.aws-service-dashboard-item {
-			display: flex;
-			flex-direction: row;
-			align-items: flex-start;
-			justify-content: space-between;
-			gap: 12px;
-			padding: 12px 16px 12px 16px;
-			border-bottom: 1px solid var(--l3-background);
-			width: 100%;
-			text-align: left;
-			&:last-child {
-				border-bottom: none;
-			}
-
-			&.aws-service-dashboard-item-clickable {
-				cursor: pointer;
-				transition: background-color 0.15s ease;
-
-				&:hover {
-					background-color: var(--muted);
-				}
-
-				&:focus-visible {
-					outline: 1px solid var(--primary-background);
-					outline-offset: -1px;
-				}
-			}
-
-			.aws-service-dashboard-item-content {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-				flex: 1;
-				min-width: 0;
-				width: 100%;
-
-				.aws-service-dashboard-item-title {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					text-align: left;
-
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					justify-content: space-between;
-					gap: 4px;
-				}
-
-				.aws-service-dashboard-item-description {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 150% */
-					text-align: left;
-				}
-			}
-
-			.aws-service-dashboard-item-open-new-tab {
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				flex-shrink: 0;
-				padding: 4px;
-				border: none;
-				border-radius: 4px;
-				background: transparent;
-				color: var(--l2-foreground);
-				cursor: pointer;
-				opacity: 0.8;
-				margin-top: 1px;
-
-				&:hover {
-					background: var(--secondary);
-					color: var(--l1-foreground);
-				}
-			}
-		}
-	}
-}

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

@@ -1,86 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import {
-	CloudintegrationtypesDashboardDTO,
-	CloudintegrationtypesServiceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-
-import './ServiceDashboards.styles.scss';
-
-function ServiceDashboards({
-	service,
-	isInteractive = true,
-}: {
-	service: Pick<CloudintegrationtypesServiceDTO, 'assets'>;
-	isInteractive?: boolean;
-}): JSX.Element {
-	const dashboards = service?.assets?.dashboards || [];
-	const { safeNavigate } = useSafeNavigate();
-	if (!dashboards.length) {
-		return <></>;
-	}
-
-	return (
-		<div className="aws-service-dashboards">
-			<div className="aws-service-dashboards-title">Dashboards</div>
-			<div className="aws-service-dashboards-items">
-				{dashboards.map((dashboard: CloudintegrationtypesDashboardDTO) => {
-					if (!dashboard.id) {
-						return null;
-					}
-
-					const dashboardUrl = `/dashboard/${dashboard.id}`;
-
-					return (
-						<div
-							key={dashboard.id}
-							className={`aws-service-dashboard-item ${
-								isInteractive ? 'aws-service-dashboard-item-clickable' : ''
-							}`}
-							role={isInteractive ? 'button' : undefined}
-							tabIndex={isInteractive ? 0 : -1}
-							onClick={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.metaKey || event.ctrlKey) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
-									return;
-								}
-								safeNavigate(dashboardUrl);
-							}}
-							onAuxClick={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.button === 1) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
-								}
-							}}
-							onKeyDown={(event): void => {
-								if (!isInteractive) {
-									return;
-								}
-								if (event.key === 'Enter' || event.key === ' ') {
-									event.preventDefault();
-									safeNavigate(dashboardUrl);
-								}
-							}}
-						>
-							<div className="aws-service-dashboard-item-content">
-								<div className="aws-service-dashboard-item-title">
-									{dashboard.title}
-								</div>
-								<div className="aws-service-dashboard-item-description">
-									{dashboard.description}
-								</div>
-							</div>
-						</div>
-					);
-				})}
-			</div>
-		</div>
-	);
-}
-
-export default ServiceDashboards;

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

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