feat(base-path): migrate remaining pattern for window.location.origin + path

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

@@ -1,226 +1,5 @@
 components:
   schemas:
-    Aio11YpricingruletypesCacheMode:
-      enum:
-      - subtract
-      - additive
-      - unknown
-      type: string
-    Aio11YpricingruletypesListPricingRulesResponse:
-      properties:
-        items:
-          items:
-            $ref: '#/components/schemas/Aio11YpricingruletypesPricingRule'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        total:
-          type: integer
-      required:
-      - items
-      - total
-      - offset
-      - limit
-      type: object
-    Aio11YpricingruletypesPostablePricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/Aio11YpricingruletypesCacheMode'
-        costCacheRead:
-          format: double
-          type: number
-        costCacheWrite:
-          format: double
-          type: number
-        costInput:
-          format: double
-          type: number
-        costOutput:
-          format: double
-          type: number
-        enabled:
-          type: boolean
-        modelName:
-          type: string
-        modelPattern:
-          items:
-            type: string
-          nullable: true
-          type: array
-        unit:
-          $ref: '#/components/schemas/Aio11YpricingruletypesUnit'
-      required:
-      - modelName
-      - modelPattern
-      - unit
-      - cacheMode
-      - costInput
-      - costOutput
-      - costCacheRead
-      - costCacheWrite
-      - enabled
-      type: object
-    Aio11YpricingruletypesPricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/Aio11YpricingruletypesCacheMode'
-        costCacheRead:
-          format: double
-          type: number
-        costCacheWrite:
-          format: double
-          type: number
-        costInput:
-          format: double
-          type: number
-        costOutput:
-          format: double
-          type: number
-        createdAt:
-          format: date-time
-          type: string
-        createdBy:
-          type: string
-        enabled:
-          type: boolean
-        id:
-          type: string
-        isOverride:
-          type: boolean
-        model:
-          type: string
-        modelPattern:
-          items:
-            type: string
-          nullable: true
-          type: array
-        orgId:
-          type: string
-        syncedAt:
-          format: date-time
-          nullable: true
-          type: string
-        unit:
-          $ref: '#/components/schemas/Aio11YpricingruletypesUnit'
-        updatedAt:
-          format: date-time
-          type: string
-        updatedBy:
-          type: string
-      required:
-      - id
-      - orgId
-      - model
-      - modelPattern
-      - unit
-      - cacheMode
-      - costInput
-      - costOutput
-      - costCacheRead
-      - costCacheWrite
-      - isOverride
-      - enabled
-      type: object
-    Aio11YpricingruletypesSyncPricingRulesRequest:
-      properties:
-        rules:
-          items:
-            $ref: '#/components/schemas/Aio11YpricingruletypesSyncablePricingRule'
-          nullable: true
-          type: array
-      required:
-      - rules
-      type: object
-    Aio11YpricingruletypesSyncPricingRulesResponse:
-      properties:
-        refreshed:
-          type: integer
-        synced:
-          type: integer
-      required:
-      - synced
-      - refreshed
-      type: object
-    Aio11YpricingruletypesSyncablePricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/Aio11YpricingruletypesCacheMode'
-        costCacheRead:
-          format: double
-          type: number
-        costCacheWrite:
-          format: double
-          type: number
-        costInput:
-          format: double
-          type: number
-        costOutput:
-          format: double
-          type: number
-        enabled:
-          type: boolean
-        modelName:
-          type: string
-        modelPattern:
-          items:
-            type: string
-          nullable: true
-          type: array
-        sourceId:
-          type: string
-        unit:
-          $ref: '#/components/schemas/Aio11YpricingruletypesUnit'
-      required:
-      - modelName
-      - modelPattern
-      - unit
-      - cacheMode
-      - costInput
-      - costOutput
-      - costCacheRead
-      - costCacheWrite
-      - enabled
-      - sourceId
-      type: object
-    Aio11YpricingruletypesUnit:
-      enum:
-      - per_million_tokens
-      type: string
-    Aio11YpricingruletypesUpdatablePricingRule:
-      properties:
-        cacheMode:
-          $ref: '#/components/schemas/Aio11YpricingruletypesCacheMode'
-        costCacheRead:
-          nullable: true
-          type: number
-        costCacheWrite:
-          nullable: true
-          type: number
-        costInput:
-          nullable: true
-          type: number
-        costOutput:
-          nullable: true
-          type: number
-        enabled:
-          nullable: true
-          type: boolean
-        isOverride:
-          nullable: true
-          type: boolean
-        modelName:
-          nullable: true
-          type: string
-        modelPattern:
-          items:
-            type: string
-          type: array
-        unit:
-          $ref: '#/components/schemas/Aio11YpricingruletypesUnit'
-      type: object
     AlertmanagertypesChannel:
       properties:
         createdAt:
@@ -4865,361 +4644,6 @@ info:
   version: ""
 openapi: 3.0.3
 paths:
-  /api/v1/ai-o11y/pricing_rules:
-    get:
-      deprecated: false
-      description: Returns all LLM pricing rules for the authenticated org, with pagination.
-      operationId: ListPricingRules
-      parameters:
-      - in: query
-        name: offset
-        schema:
-          type: integer
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Aio11YpricingruletypesListPricingRulesResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List pricing rules
-      tags:
-      - ai-o11y
-    post:
-      deprecated: false
-      description: Creates a new LLM pricing rule for the org. Always sets is_override
-        = true.
-      operationId: CreatePricingRule
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/Aio11YpricingruletypesPostablePricingRule'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Aio11YpricingruletypesPricingRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create a pricing rule
-      tags:
-      - ai-o11y
-  /api/v1/ai-o11y/pricing_rules/{id}:
-    delete:
-      deprecated: false
-      description: Hard-deletes a pricing rule. If auto-synced, it will be recreated
-        on the next sync cycle.
-      operationId: DeletePricingRule
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete a pricing rule
-      tags:
-      - ai-o11y
-    get:
-      deprecated: false
-      description: Returns a single LLM pricing rule by ID.
-      operationId: GetPricingRule
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Aio11YpricingruletypesPricingRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get a pricing rule
-      tags:
-      - ai-o11y
-    patch:
-      deprecated: false
-      description: Partially updates an existing pricing rule. Changing any cost field
-        sets is_override = true.
-      operationId: UpdatePricingRule
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/Aio11YpricingruletypesUpdatablePricingRule'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Aio11YpricingruletypesPricingRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update a pricing rule
-      tags:
-      - ai-o11y
-  /api/v1/ai-o11y/pricing_rules/sync:
-    put:
-      deprecated: false
-      description: Zeus bulk-upserts upstream pricing. Non-override rules get costs
-        updated; override rules get only SourceConfig refreshed.
-      operationId: SyncPricingRules
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/Aio11YpricingruletypesSyncPricingRulesRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Aio11YpricingruletypesSyncPricingRulesResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Bulk sync pricing rules
-      tags:
-      - ai-o11y
   /api/v1/alerts:
     get:
       deprecated: false

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; upgrade to error coming PR
+		'rulesdir/no-raw-absolute-path': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

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

@@ -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"
@@ -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

@@ -63,7 +63,6 @@
     "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/tabs": "0.0.11",
     "@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/ai-o11y/index.ts

@@ -1,577 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	Aio11YpricingruletypesPostablePricingRuleDTO,
-	Aio11YpricingruletypesSyncPricingRulesRequestDTO,
-	Aio11YpricingruletypesUpdatablePricingRuleDTO,
-	CreatePricingRule201,
-	DeletePricingRulePathParameters,
-	GetPricingRule200,
-	GetPricingRulePathParameters,
-	ListPricingRules200,
-	ListPricingRulesParams,
-	RenderErrorResponseDTO,
-	SyncPricingRules200,
-	UpdatePricingRule200,
-	UpdatePricingRulePathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * Returns all LLM pricing rules for the authenticated org, with pagination.
- * @summary List pricing rules
- */
-export const listPricingRules = (
-	params?: ListPricingRulesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListPricingRules200>({
-		url: `/api/v1/ai-o11y/pricing_rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListPricingRulesQueryKey = (
-	params?: ListPricingRulesParams,
-) => {
-	return [`/api/v1/ai-o11y/pricing_rules`, ...(params ? [params] : [])] as const;
-};
-
-export const getListPricingRulesQueryOptions = <
-	TData = Awaited<ReturnType<typeof listPricingRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	params?: ListPricingRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listPricingRules>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListPricingRulesQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listPricingRules>>> = ({
-		signal,
-	}) => listPricingRules(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listPricingRules>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListPricingRulesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listPricingRules>>
->;
-export type ListPricingRulesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List pricing rules
- */
-
-export function useListPricingRules<
-	TData = Awaited<ReturnType<typeof listPricingRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	params?: ListPricingRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listPricingRules>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListPricingRulesQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List pricing rules
- */
-export const invalidateListPricingRules = async (
-	queryClient: QueryClient,
-	params?: ListPricingRulesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListPricingRulesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Creates a new LLM pricing rule for the org. Always sets is_override = true.
- * @summary Create a pricing rule
- */
-export const createPricingRule = (
-	aio11YpricingruletypesPostablePricingRuleDTO: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreatePricingRule201>({
-		url: `/api/v1/ai-o11y/pricing_rules`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: aio11YpricingruletypesPostablePricingRuleDTO,
-		signal,
-	});
-};
-
-export const getCreatePricingRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createPricingRule>>,
-		TError,
-		{ data: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createPricingRule>>,
-	TError,
-	{ data: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO> },
-	TContext
-> => {
-	const mutationKey = ['createPricingRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createPricingRule>>,
-		{ data: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createPricingRule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreatePricingRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createPricingRule>>
->;
-export type CreatePricingRuleMutationBody = BodyType<Aio11YpricingruletypesPostablePricingRuleDTO>;
-export type CreatePricingRuleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create a pricing rule
- */
-export const useCreatePricingRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createPricingRule>>,
-		TError,
-		{ data: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createPricingRule>>,
-	TError,
-	{ data: BodyType<Aio11YpricingruletypesPostablePricingRuleDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreatePricingRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Hard-deletes a pricing rule. If auto-synced, it will be recreated on the next sync cycle.
- * @summary Delete a pricing rule
- */
-export const deletePricingRule = ({ id }: DeletePricingRulePathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/ai-o11y/pricing_rules/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeletePricingRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deletePricingRule>>,
-		TError,
-		{ pathParams: DeletePricingRulePathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deletePricingRule>>,
-	TError,
-	{ pathParams: DeletePricingRulePathParameters },
-	TContext
-> => {
-	const mutationKey = ['deletePricingRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deletePricingRule>>,
-		{ pathParams: DeletePricingRulePathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deletePricingRule(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeletePricingRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deletePricingRule>>
->;
-
-export type DeletePricingRuleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete a pricing rule
- */
-export const useDeletePricingRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deletePricingRule>>,
-		TError,
-		{ pathParams: DeletePricingRulePathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deletePricingRule>>,
-	TError,
-	{ pathParams: DeletePricingRulePathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeletePricingRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Returns a single LLM pricing rule by ID.
- * @summary Get a pricing rule
- */
-export const getPricingRule = (
-	{ id }: GetPricingRulePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetPricingRule200>({
-		url: `/api/v1/ai-o11y/pricing_rules/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetPricingRuleQueryKey = ({
-	id,
-}: GetPricingRulePathParameters) => {
-	return [`/api/v1/ai-o11y/pricing_rules/${id}`] as const;
-};
-
-export const getGetPricingRuleQueryOptions = <
-	TData = Awaited<ReturnType<typeof getPricingRule>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetPricingRulePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPricingRule>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetPricingRuleQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getPricingRule>>> = ({
-		signal,
-	}) => getPricingRule({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getPricingRule>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetPricingRuleQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getPricingRule>>
->;
-export type GetPricingRuleQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get a pricing rule
- */
-
-export function useGetPricingRule<
-	TData = Awaited<ReturnType<typeof getPricingRule>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetPricingRulePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getPricingRule>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetPricingRuleQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get a pricing rule
- */
-export const invalidateGetPricingRule = async (
-	queryClient: QueryClient,
-	{ id }: GetPricingRulePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetPricingRuleQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Partially updates an existing pricing rule. Changing any cost field sets is_override = true.
- * @summary Update a pricing rule
- */
-export const updatePricingRule = (
-	{ id }: UpdatePricingRulePathParameters,
-	aio11YpricingruletypesUpdatablePricingRuleDTO: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>,
-) => {
-	return GeneratedAPIInstance<UpdatePricingRule200>({
-		url: `/api/v1/ai-o11y/pricing_rules/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: aio11YpricingruletypesUpdatablePricingRuleDTO,
-	});
-};
-
-export const getUpdatePricingRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updatePricingRule>>,
-		TError,
-		{
-			pathParams: UpdatePricingRulePathParameters;
-			data: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updatePricingRule>>,
-	TError,
-	{
-		pathParams: UpdatePricingRulePathParameters;
-		data: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updatePricingRule'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updatePricingRule>>,
-		{
-			pathParams: UpdatePricingRulePathParameters;
-			data: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updatePricingRule(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdatePricingRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updatePricingRule>>
->;
-export type UpdatePricingRuleMutationBody = BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-export type UpdatePricingRuleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update a pricing rule
- */
-export const useUpdatePricingRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updatePricingRule>>,
-		TError,
-		{
-			pathParams: UpdatePricingRulePathParameters;
-			data: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updatePricingRule>>,
-	TError,
-	{
-		pathParams: UpdatePricingRulePathParameters;
-		data: BodyType<Aio11YpricingruletypesUpdatablePricingRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdatePricingRuleMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Zeus bulk-upserts upstream pricing. Non-override rules get costs updated; override rules get only SourceConfig refreshed.
- * @summary Bulk sync pricing rules
- */
-export const syncPricingRules = (
-	aio11YpricingruletypesSyncPricingRulesRequestDTO: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO>,
-) => {
-	return GeneratedAPIInstance<SyncPricingRules200>({
-		url: `/api/v1/ai-o11y/pricing_rules/sync`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: aio11YpricingruletypesSyncPricingRulesRequestDTO,
-	});
-};
-
-export const getSyncPricingRulesMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof syncPricingRules>>,
-		TError,
-		{ data: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof syncPricingRules>>,
-	TError,
-	{ data: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO> },
-	TContext
-> => {
-	const mutationKey = ['syncPricingRules'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof syncPricingRules>>,
-		{ data: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return syncPricingRules(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type SyncPricingRulesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof syncPricingRules>>
->;
-export type SyncPricingRulesMutationBody = BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO>;
-export type SyncPricingRulesMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Bulk sync pricing rules
- */
-export const useSyncPricingRules = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof syncPricingRules>>,
-		TError,
-		{ data: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof syncPricingRules>>,
-	TError,
-	{ data: BodyType<Aio11YpricingruletypesSyncPricingRulesRequestDTO> },
-	TContext
-> => {
-	const mutationOptions = getSyncPricingRulesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -4,251 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-export enum Aio11YpricingruletypesCacheModeDTO {
-	subtract = 'subtract',
-	additive = 'additive',
-	unknown = 'unknown',
-}
-export interface Aio11YpricingruletypesListPricingRulesResponseDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	items: Aio11YpricingruletypesPricingRuleDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset: number;
-	/**
-	 * @type integer
-	 */
-	total: number;
-}
-
-export interface Aio11YpricingruletypesPostablePricingRuleDTO {
-	cacheMode: Aio11YpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheRead: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheWrite: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costInput: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costOutput: number;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	modelPattern: string[] | null;
-	unit: Aio11YpricingruletypesUnitDTO;
-}
-
-export interface Aio11YpricingruletypesPricingRuleDTO {
-	cacheMode: Aio11YpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheRead: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheWrite: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costInput: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costOutput: number;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type boolean
-	 */
-	isOverride: boolean;
-	/**
-	 * @type string
-	 */
-	model: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	modelPattern: string[] | null;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	syncedAt?: Date | null;
-	unit: Aio11YpricingruletypesUnitDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface Aio11YpricingruletypesSyncPricingRulesRequestDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	rules: Aio11YpricingruletypesSyncablePricingRuleDTO[] | null;
-}
-
-export interface Aio11YpricingruletypesSyncPricingRulesResponseDTO {
-	/**
-	 * @type integer
-	 */
-	refreshed: number;
-	/**
-	 * @type integer
-	 */
-	synced: number;
-}
-
-export interface Aio11YpricingruletypesSyncablePricingRuleDTO {
-	cacheMode: Aio11YpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheRead: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costCacheWrite: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costInput: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	costOutput: number;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 */
-	modelName: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	modelPattern: string[] | null;
-	/**
-	 * @type string
-	 */
-	sourceId: string;
-	unit: Aio11YpricingruletypesUnitDTO;
-}
-
-export enum Aio11YpricingruletypesUnitDTO {
-	per_million_tokens = 'per_million_tokens',
-}
-export interface Aio11YpricingruletypesUpdatablePricingRuleDTO {
-	cacheMode?: Aio11YpricingruletypesCacheModeDTO;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	costCacheRead?: number | null;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	costCacheWrite?: number | null;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	costInput?: number | null;
-	/**
-	 * @type number
-	 * @nullable true
-	 */
-	costOutput?: number | null;
-	/**
-	 * @type boolean
-	 * @nullable true
-	 */
-	enabled?: boolean | null;
-	/**
-	 * @type boolean
-	 * @nullable true
-	 */
-	isOverride?: boolean | null;
-	/**
-	 * @type string
-	 * @nullable true
-	 */
-	modelName?: string | null;
-	/**
-	 * @type array
-	 */
-	modelPattern?: string[];
-	unit?: Aio11YpricingruletypesUnitDTO;
-}
-
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -5936,68 +5691,6 @@ export interface ZeustypesPostableProfileDTO {
 	where_did_you_discover_signoz: string;
 }
 
-export type ListPricingRulesParams = {
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-};
-
-export type ListPricingRules200 = {
-	data: Aio11YpricingruletypesListPricingRulesResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreatePricingRule201 = {
-	data: Aio11YpricingruletypesPricingRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeletePricingRulePathParameters = {
-	id: string;
-};
-export type GetPricingRulePathParameters = {
-	id: string;
-};
-export type GetPricingRule200 = {
-	data: Aio11YpricingruletypesPricingRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdatePricingRulePathParameters = {
-	id: string;
-};
-export type UpdatePricingRule200 = {
-	data: Aio11YpricingruletypesPricingRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type SyncPricingRules200 = {
-	data: Aio11YpricingruletypesSyncPricingRulesResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetAlerts200 = {
 	/**
 	 * @type array

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

@@ -25,6 +25,5 @@ import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/table';
-import '@signozhq/tabs';
 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/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

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

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -13,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/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/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/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,27 +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;
+		background: var(--l3-background) !important;
 		padding: 6px 8px !important;
 	}
-	.ant-select-item-option-active {
-		background: var(--l3-background) !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;
@@ -139,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,51 +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"
-							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>
@@ -90,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>
@@ -104,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(
 		() =>
@@ -137,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]);
 
@@ -179,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],
@@ -209,10 +228,10 @@ function AccountActions(): JSX.Element {
 				/>
 			)}
 
-			{isAccountSettingsModalOpen && activeAccount && (
+			{isAccountSettingsModalOpen && (
 				<AccountSettingsModal
 					onClose={(): void => setIsAccountSettingsModalOpen(false)}
-					account={activeAccount}
+					account={activeAccount as CloudAccount}
 					setActiveAccount={setActiveAccount}
 				/>
 			)}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,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/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/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?.id}
-								</span>
-							</div>
-						</div>
-					</div>
-
-					<div className="account-settings-modal__body-region-selector">
-						<div className="account-settings-modal__body-region-selector-title">
-							Which regions do you want to monitor?
-						</div>
-						<div className="account-settings-modal__body-region-selector-description">
-							Choose only the regions you want SigNoz to monitor.
-						</div>
-
-						<RegionSelector
-							selectedRegions={selectedRegions}
-							setSelectedRegions={setSelectedRegions}
-							setIncludeAllRegions={setIncludeAllRegions}
-						/>
-					</div>
-				</div>
-
-				<div className="account-settings-modal__footer">
-					<RemoveIntegrationAccount
-						accountId={account?.id}
-						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-					/>
-
-					<Button
-						variant="solid"
-						color="secondary"
-						disabled={isSaveDisabled}
-						onClick={handleSubmit}
-						loading={isLoading}
-						prefixIcon={<Save size={14} />}
-					>
-						Update Changes
-					</Button>
-				</div>
-			</Form>
-		);
-	}, [
-		form,
-		selectedRegions,
-		includeAllRegions,
-		account?.id,
-		handleRemoveIntegrationAccountSuccess,
-		isSaveDisabled,
-		handleSubmit,
-		isLoading,
-		setSelectedRegions,
-		setIncludeAllRegions,
-	]);
-
-	const handleDrawerOpenChange = useCallback(
-		(open: boolean): void => {
-			if (!open) {
-				handleClose();
-			}
-		},
-		[handleClose],
-	);
-
-	return (
-		<DrawerWrapper
-			open={true}
-			type="panel"
-			className="account-settings-modal"
-			header={{
-				title: 'Account Settings',
-			}}
-			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% */
-						}
-					}
-				}
-			}
-		}
-	}
-}

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

@@ -1,430 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import Tabs from '@signozhq/tabs';
-import { toast } from '@signozhq/ui';
-import { Switch } from '@signozhq/ui';
-import { Skeleton } from 'antd';
-import logEvent from 'api/common/logEvent';
-import {
-	getListServicesMetadataQueryKey,
-	invalidateGetService,
-	invalidateListServicesMetadata,
-	useGetService,
-	useUpdateService,
-} from 'api/generated/services/cloudintegration';
-import {
-	CloudintegrationtypesServiceDTO,
-	ListServicesMetadata200,
-} from 'api/generated/services/sigNoz.schemas';
-import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
-import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import ServiceDashboards from 'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { IServiceStatus } from 'container/Integrations/types';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { Save, X } from 'lucide-react';
-
-import S3BucketsSelector from '../S3BucketsSelector/S3BucketsSelector';
-
-import './ServiceDetails.styles.scss';
-
-type ServiceConfigFormValues = {
-	logsEnabled: boolean;
-	metricsEnabled: boolean;
-	s3BucketsByRegion: Record<string, string[]>;
-};
-type ServiceDetailsData = CloudintegrationtypesServiceDTO & {
-	status?: IServiceStatus;
-};
-
-function ServiceDetails(): JSX.Element | null {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId');
-	const serviceId = urlQuery.get('service');
-	const isReadOnly = !cloudAccountId;
-	const serviceQueryParams = cloudAccountId
-		? { cloud_integration_id: cloudAccountId }
-		: undefined;
-
-	const {
-		queryKey: _queryKey,
-		data: serviceDetailsData,
-		isLoading: isServiceDetailsLoading,
-	} = useGetService(
-		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
-			serviceId: serviceId || '',
-		},
-		{
-			...serviceQueryParams,
-		},
-		{
-			query: {
-				enabled: !!serviceId,
-				select: (response): ServiceDetailsData => response.data,
-			},
-		},
-	);
-
-	const awsConfig = serviceDetailsData?.cloudIntegrationService?.config?.aws;
-	const isServiceEnabledInPersistedConfig =
-		Boolean(awsConfig?.logs?.enabled) || Boolean(awsConfig?.metrics?.enabled);
-	const serviceDetailsId = serviceDetailsData?.id;
-
-	const {
-		control,
-		handleSubmit: handleFormSubmit,
-		reset,
-		watch,
-		formState: { isDirty },
-	} = useForm<ServiceConfigFormValues>({
-		defaultValues: {
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		},
-	});
-
-	const resetToAwsConfig = useCallback((): void => {
-		reset({
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		});
-	}, [awsConfig, reset]);
-
-	// Ensure form state does not leak across service switches while new details load.
-	useEffect(() => {
-		reset({
-			logsEnabled: false,
-			metricsEnabled: false,
-			s3BucketsByRegion: {},
-		});
-	}, [reset, serviceId]);
-
-	useEffect(() => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig, serviceDetailsId]);
-
-	// log telemetry event on visiting details of a service.
-	useEffect(() => {
-		if (serviceId) {
-			logEvent('AWS Integration: Service viewed', {
-				cloudAccountId,
-				serviceId,
-			});
-		}
-	}, [cloudAccountId, serviceId]);
-
-	const {
-		mutate: updateService,
-		isLoading: isUpdatingServiceConfig,
-	} = useUpdateService();
-
-	const queryClient = useQueryClient();
-
-	const handleDiscard = useCallback((): void => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig]);
-
-	const onSubmit = useCallback(
-		async (values: ServiceConfigFormValues): Promise<void> => {
-			const { logsEnabled, metricsEnabled, s3BucketsByRegion } = values;
-			const shouldClearS3Buckets = serviceId === 's3sync' && !logsEnabled;
-			const normalizedS3BucketsByRegion = shouldClearS3Buckets
-				? {}
-				: s3BucketsByRegion;
-			const nextFormValues: ServiceConfigFormValues = {
-				...values,
-				s3BucketsByRegion: normalizedS3BucketsByRegion,
-			};
-
-			try {
-				if (!serviceId || !cloudAccountId) {
-					return;
-				}
-
-				updateService(
-					{
-						pathParams: {
-							cloudProvider: INTEGRATION_TYPES.AWS,
-							id: cloudAccountId,
-							serviceId,
-						},
-						data: {
-							config: {
-								aws: {
-									logs: {
-										enabled: logsEnabled,
-										s3Buckets: normalizedS3BucketsByRegion,
-									},
-									metrics: {
-										enabled: metricsEnabled,
-									},
-								},
-							},
-						},
-					},
-					{
-						onSuccess: () => {
-							// Immediately sync form state to remove dirty flag and hide actions,
-							// instead of waiting for the refetch to complete.
-							reset(nextFormValues);
-
-							const servicesListQueryKey = getListServicesMetadataQueryKey(
-								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
-
-							queryClient.setQueryData<ListServicesMetadata200 | undefined>(
-								servicesListQueryKey,
-								(prev) => {
-									if (!prev?.data?.services?.length) {
-										return prev;
-									}
-
-									const isServiceEnabled = logsEnabled || metricsEnabled;
-
-									return {
-										...prev,
-										data: {
-											...prev.data,
-											services: prev.data.services.map((service) =>
-												service.id === serviceId
-													? { ...service, enabled: isServiceEnabled }
-													: service,
-											),
-										},
-									};
-								},
-							);
-
-							invalidateGetService(
-								queryClient,
-								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
-									serviceId,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
-
-							invalidateListServicesMetadata(
-								queryClient,
-								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
-
-							logEvent('AWS Integration: Service settings saved', {
-								cloudAccountId,
-								serviceId,
-								logsEnabled,
-								metricsEnabled,
-							});
-						},
-						onError: (error) => {
-							console.error('Failed to update service config:', error);
-
-							toast.error('Failed to update service config', {
-								description: error?.message,
-							});
-						},
-					},
-				);
-			} catch (error) {
-				console.error('Form submission failed:', error);
-			}
-		},
-		[serviceId, cloudAccountId, updateService, queryClient, reset],
-	);
-
-	if (isServiceDetailsLoading) {
-		return (
-			<div className="service-details-loading">
-				<Skeleton active />
-				<Skeleton active />
-			</div>
-		);
-	}
-
-	if (!serviceDetailsData) {
-		return null;
-	}
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const renderOverview = (): JSX.Element => {
-		const logsEnabled = watch('logsEnabled');
-		const s3BucketsByRegion = watch('s3BucketsByRegion');
-
-		const isLogsSupported = serviceDetailsData?.supportedSignals?.logs || false;
-		const isMetricsSupported =
-			serviceDetailsData?.supportedSignals?.metrics || false;
-
-		const hasUnsavedChanges = isDirty;
-
-		const isS3SyncBucketsMissing =
-			serviceId === 's3sync' &&
-			logsEnabled &&
-			(!s3BucketsByRegion || Object.keys(s3BucketsByRegion).length === 0);
-
-		return (
-			<div className="aws-service-details-overview ">
-				{!isServiceDetailsLoading && (
-					<form
-						className="aws-service-details-overview-configuration"
-						onSubmit={handleFormSubmit(onSubmit)}
-					>
-						{isLogsSupported && (
-							<div className="aws-service-details-overview-configuration-logs">
-								<div className="aws-service-details-overview-configuration-title">
-									<div className="aws-service-details-overview-configuration-title-text">
-										<span>Log Collection</span>
-									</div>
-									<div className="configuration-action">
-										<Controller<ServiceConfigFormValues, 'logsEnabled'>
-											control={control}
-											name="logsEnabled"
-											render={({ field }): JSX.Element => (
-												<Switch
-													value={field.value}
-													disabled={isUpdatingServiceConfig || isReadOnly}
-													onChange={(checked): void => {
-														field.onChange(checked);
-													}}
-												/>
-											)}
-										/>
-									</div>
-								</div>
-
-								{logsEnabled && serviceId === 's3sync' && (
-									<div className="aws-service-details-overview-configuration-s3-buckets">
-										<Controller<ServiceConfigFormValues, 's3BucketsByRegion'>
-											control={control}
-											name="s3BucketsByRegion"
-											render={({ field }): JSX.Element => (
-												<S3BucketsSelector
-													initialBucketsByRegion={field.value}
-													onChange={field.onChange}
-													disabled={isReadOnly}
-												/>
-											)}
-										/>
-									</div>
-								)}
-							</div>
-						)}
-
-						{isMetricsSupported && (
-							<div className="aws-service-details-overview-configuration-metrics">
-								<div className="aws-service-details-overview-configuration-title">
-									<div className="aws-service-details-overview-configuration-title-text">
-										<span>Metric Collection</span>
-									</div>
-									<div className="configuration-action">
-										<Controller<ServiceConfigFormValues, 'metricsEnabled'>
-											control={control}
-											name="metricsEnabled"
-											render={({ field }): JSX.Element => (
-												<Switch
-													value={field.value}
-													disabled={isUpdatingServiceConfig || isReadOnly}
-													onChange={field.onChange}
-												/>
-											)}
-										/>
-									</div>
-								</div>
-							</div>
-						)}
-
-						{hasUnsavedChanges && !isReadOnly && (
-							<div className="aws-service-details-overview-configuration-actions">
-								<Button
-									variant="solid"
-									color="secondary"
-									onClick={handleDiscard}
-									disabled={isUpdatingServiceConfig}
-									size="xs"
-									prefixIcon={<X size={14} />}
-									className="discard-btn"
-									type="button"
-								>
-									Discard
-								</Button>
-								<Button
-									variant="solid"
-									color="primary"
-									size="xs"
-									className="save-btn"
-									prefixIcon={<Save size={14} />}
-									type="submit"
-									loading={isUpdatingServiceConfig}
-									disabled={isS3SyncBucketsMissing || isUpdatingServiceConfig}
-								>
-									Save
-								</Button>
-							</div>
-						)}
-					</form>
-				)}
-
-				<MarkdownRenderer
-					variables={{}}
-					markdownContent={serviceDetailsData?.overview}
-					className="aws-service-details-overview-markdown"
-				/>
-				<ServiceDashboards
-					service={serviceDetailsData}
-					isInteractive={!isReadOnly && isServiceEnabledInPersistedConfig}
-				/>
-			</div>
-		);
-	};
-
-	const renderDataCollected = (): JSX.Element => {
-		return (
-			<div className="aws-service-details-data-collected-table">
-				<CloudServiceDataCollected
-					logsData={serviceDetailsData?.dataCollected?.logs || []}
-					metricsData={serviceDetailsData?.dataCollected?.metrics || []}
-				/>
-			</div>
-		);
-	};
-
-	return (
-		<div className="aws-service-details-container">
-			<Tabs
-				defaultValue="overview"
-				className="aws-service-details-tabs"
-				items={[
-					{
-						children: renderOverview(),
-						key: 'overview',
-						label: 'Overview',
-					},
-					{
-						children: renderDataCollected(),
-						key: 'data-collected',
-						label: 'Data Collected',
-					},
-				]}
-				variant="secondary"
-			/>
-		</div>
-	);
-}
-
-export default ServiceDetails;

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

@@ -1,155 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
-import { Skeleton } from 'antd';
-import { useListServicesMetadata } from 'api/generated/services/cloudintegration';
-import type { CloudintegrationtypesServiceMetadataDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import emptyStateIconUrl from '@/assets/Icons/emptyState.svg';
-
-interface ServicesListProps {
-	cloudAccountId: string;
-}
-
-function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
-	const hasValidCloudAccountId = Boolean(cloudAccountId);
-	const serviceQueryParams = hasValidCloudAccountId
-		? { cloud_integration_id: cloudAccountId }
-		: undefined;
-
-	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
-		{
-			cloudProvider: 'aws',
-		},
-		serviceQueryParams,
-	);
-
-	const awsServices = useMemo(() => servicesMetadata?.data?.services ?? [], [
-		servicesMetadata,
-	]);
-
-	const activeService = urlQuery.get('service');
-
-	const handleActiveService = useCallback(
-		(serviceId: string): void => {
-			const latestUrlQuery = new URLSearchParams(window.location.search);
-			latestUrlQuery.set('service', serviceId);
-			navigate({ search: latestUrlQuery.toString() });
-		},
-		[navigate],
-	);
-
-	const enabledServices = useMemo(
-		() => awsServices.filter((service) => service.enabled),
-		[awsServices],
-	);
-
-	// Derive from enabled to guarantee each service is in exactly one list
-	const enabledIds = useMemo(() => new Set(enabledServices.map((s) => s.id)), [
-		enabledServices,
-	]);
-	const notEnabledServices = useMemo(
-		() => awsServices?.filter((s) => !enabledIds.has(s.id)) ?? [],
-		[awsServices, enabledIds],
-	);
-
-	useEffect(() => {
-		const allServices = [...enabledServices, ...notEnabledServices];
-		const defaultServiceId =
-			enabledServices[0]?.id ?? notEnabledServices[0]?.id ?? null;
-
-		// If a service is already selected and still exists in the refreshed list, keep it
-		if (activeService && allServices.some((s) => s.id === activeService)) {
-			return;
-		}
-
-		// No valid selection — pick a default
-		if (defaultServiceId) {
-			handleActiveService(defaultServiceId);
-		}
-	}, [activeService, enabledServices, notEnabledServices, handleActiveService]);
-
-	if (isLoading) {
-		return (
-			<div className="services-list-loading">
-				<Skeleton active />
-				<Skeleton active />
-			</div>
-		);
-	}
-
-	if (!awsServices?.length) {
-		return (
-			<div className="services-list-empty-message">
-				{' '}
-				<img
-					src={emptyStateIconUrl}
-					alt="no-services-found"
-					className="empty-state-svg"
-				/>{' '}
-				No services found
-			</div>
-		);
-	}
-
-	const isEnabledServicesEmpty = enabledServices.length === 0;
-	const isNotEnabledServicesEmpty = notEnabledServices.length === 0;
-
-	const renderServiceItem = (
-		service: CloudintegrationtypesServiceMetadataDTO,
-	): JSX.Element => {
-		return (
-			<div
-				className={cx('aws-services-list-view-sidebar-content-item', {
-					active: service.id === activeService,
-				})}
-				key={service.id}
-				onClick={(): void => handleActiveService(service.id)}
-			>
-				<img
-					src={service.icon}
-					alt={service.title}
-					className="aws-services-list-view-sidebar-content-item-icon"
-				/>
-				<div className="aws-services-list-view-sidebar-content-item-title">
-					{service.title}
-				</div>
-			</div>
-		);
-	};
-
-	return (
-		<div className="aws-services-list-view">
-			<div className="aws-services-list-view-sidebar">
-				<div className="aws-services-list-view-sidebar-content">
-					<div className="aws-services-enabled">
-						<div className="aws-services-list-view-sidebar-content-header">
-							Enabled
-						</div>
-						{enabledServices.map((service) => renderServiceItem(service))}
-
-						{isEnabledServicesEmpty && (
-							<div className="aws-services-list-view-sidebar-content-item-empty-message">
-								No enabled services
-							</div>
-						)}
-					</div>
-
-					{!isNotEnabledServicesEmpty && (
-						<div className="aws-services-not-enabled">
-							<div className="aws-services-list-view-sidebar-content-header">
-								Not Enabled
-							</div>
-							{notEnabledServices.map((service) => renderServiceItem(service))}
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default ServicesList;

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

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

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

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

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

@@ -1,68 +0,0 @@
-import {
-	GetService200,
-	ListAccounts200,
-} from 'api/generated/services/sigNoz.schemas';
-
-const CLOUD_ACCOUNT_ID = 'a1b2c3d4-e5f6-7890-1234-567890abcdef';
-const PROVIDER_ACCOUNT_ID = '123456789012';
-
-const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
-
-const accountsResponse: ListAccounts200 = {
-	status: 'success',
-	data: {
-		accounts: [
-			{
-				id: CLOUD_ACCOUNT_ID,
-				orgId: 'org-1',
-				provider: 'aws',
-				config: {
-					aws: {
-						regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
-					},
-				},
-				agentReport: {
-					timestampMillis: 1747114366214,
-					data: null,
-				},
-				providerAccountId: PROVIDER_ACCOUNT_ID,
-				removedAt: null,
-			},
-		],
-	},
-};
-
-/** Response shape for GET /cloud_integrations/aws/services/:serviceId (used by ServiceDetails). */
-const buildServiceDetailsResponse = (
-	serviceId: string,
-	initialConfigLogsS3Buckets: Record<string, string[]> = {},
-): GetService200 => ({
-	status: 'success',
-	data: {
-		id: serviceId,
-		title: serviceId === 's3sync' ? 'S3 Sync' : serviceId,
-		icon: '',
-		overview: '',
-		supportedSignals: { logs: serviceId === 's3sync', metrics: false },
-		assets: { dashboards: [] },
-		dataCollected: { logs: [], metrics: [] },
-		cloudIntegrationService: {
-			id: serviceId,
-			config: {
-				aws: {
-					logs: { enabled: true, s3Buckets: initialConfigLogsS3Buckets },
-					metrics: { enabled: false },
-				},
-			},
-		},
-		telemetryCollectionStrategy: { aws: {} },
-	},
-});
-
-export {
-	accountsResponse,
-	buildServiceDetailsResponse,
-	CLOUD_ACCOUNT_ID,
-	initialBuckets,
-	PROVIDER_ACCOUNT_ID,
-};

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

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

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

@@ -1,25 +0,0 @@
-import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { CloudAccount } from './types';
-
-export function mapAccountDtoToAwsCloudAccount(
-	account: CloudintegrationtypesAccountDTO,
-): CloudAccount | null {
-	if (!account.providerAccountId) {
-		return null;
-	}
-
-	return {
-		id: account.id,
-		cloud_account_id: account.id,
-		config: {
-			regions: account.config?.aws?.regions ?? [],
-		},
-		status: {
-			integration: {
-				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
-			},
-		},
-		providerAccountId: account.providerAccountId,
-	};
-}

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

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

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

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

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

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

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

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

frontend/src/container/Integrations/CloudIntegration/utils.ts

@@ -1,5 +0,0 @@
-export const getAccountById = <T extends { cloud_account_id: string }>(
-	accounts: T[],
-	accountId: string,
-): T | null =>
-	accounts.find((account) => account.cloud_account_id === accountId) || null;

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

@@ -1,544 +0,0 @@
-.integration-details-container {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 16px;
-
-	.integration-details-content-container {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.error-container {
-			display: flex;
-			border-radius: 6px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-
-			.error-content {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				height: 300px;
-				gap: 15px;
-
-				.error-btns {
-					display: flex;
-					flex-direction: row;
-					gap: 16px;
-					align-items: center;
-
-					.retry-btn {
-						display: flex;
-						align-items: center;
-					}
-
-					.contact-support {
-						display: flex;
-						align-items: center;
-						gap: 4px;
-						cursor: pointer;
-
-						.text {
-							color: var(--callout-primary-description);
-							font-weight: 500;
-						}
-					}
-				}
-
-				.error-state-svg {
-					height: 40px;
-					width: 40px;
-				}
-			}
-		}
-
-		.loading-integration-details {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-
-			.skeleton-1 {
-				height: 125px;
-				width: 100%;
-			}
-			.skeleton-2 {
-				height: 250px;
-				width: 100%;
-			}
-		}
-
-		.integration-connection-header {
-			display: flex;
-			flex-direction: column;
-			padding: 16px;
-			gap: 12px;
-			border-radius: 6px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-
-			.integration-detail-header {
-				display: flex;
-				gap: 10px;
-				justify-content: space-between;
-				align-items: center;
-
-				.integration-detail-header-icon-title-container {
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					gap: 10px;
-				}
-
-				.image-container {
-					height: 40px;
-					width: 40px;
-					flex-shrink: 0;
-					border-radius: 2px;
-					border: 1px solid var(--l3-border);
-					background: var(--l2-background);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-
-					.image {
-						height: 24px;
-						width: 24px;
-					}
-				}
-				.details {
-					display: flex;
-					flex-direction: column;
-					.heading {
-						color: var(--l1-foreground);
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 500;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: -0.07px;
-					}
-
-					.description {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 12px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 18px; /* 150% */
-					}
-				}
-
-				.configure-btn {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					align-self: flex-start;
-					gap: 2px;
-					flex-shrink: 0;
-					min-width: 143px;
-					height: 30px;
-					padding: 6px;
-					border-radius: 2px;
-					border: 1px solid var(--l3-border);
-					background: var(--primary-background);
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 10px; /* 83.333% */
-					letter-spacing: 0.12px;
-					box-shadow: none;
-
-					&.test-connection {
-						border-radius: 2px;
-						border: 1px solid var(--l2-border);
-						background: var(--l2-background);
-						color: var(--l2-foreground);
-					}
-				}
-			}
-
-			.connection-container {
-				padding: 0 18px;
-				height: 37px;
-				display: flex;
-				align-items: center;
-
-				.connection-text {
-					margin: 0px;
-					padding: 0px 0px 0px 10px;
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 22px; /* 157.143% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.testingConnection {
-				border-radius: 4px;
-				border: 1px solid rgba(255, 205, 86, 0.1);
-				background: rgba(255, 205, 86, 0.1);
-				color: var(--callout-warning-title);
-			}
-
-			.connected {
-				border-radius: 4px;
-				border: 1px solid rgba(37, 225, 146, 0.1);
-				background: rgba(37, 225, 146, 0.1);
-				color: var(--callout-success-title);
-			}
-
-			.connectionFailed {
-				border-radius: 4px;
-				border: 1px solid rgba(218, 85, 101, 0.2);
-				background: rgba(218, 85, 101, 0.06);
-				color: var(--callout-error-title);
-			}
-
-			.noDataSinceLong {
-				border-radius: 4px;
-				border: 1px solid rgba(78, 116, 248, 0.1);
-				background: rgba(78, 116, 248, 0.1);
-				color: var(--callout-primary-description);
-			}
-		}
-
-		.integration-detail-container {
-			border-radius: 6px;
-			padding: 10px 16px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-
-			.integration-tab-btns {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 8px 8px 18px 8px !important;
-
-				.typography {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.integration-tab-btns:hover {
-				&.ant-btn-text {
-					background-color: unset !important;
-				}
-			}
-
-			.ant-tabs-nav-list {
-				gap: 24px;
-			}
-
-			.ant-tabs-nav {
-				padding: 0px !important;
-			}
-
-			.ant-tabs-tab {
-				padding: 0 !important;
-			}
-
-			.ant-tabs-tab + .ant-tabs-tab {
-				margin: 0px !important;
-			}
-		}
-
-		.uninstall-integration-bar {
-			display: flex;
-			justify-content: space-between;
-			padding: 16px;
-			border-radius: 4px;
-			border: 1px solid rgba(218, 85, 101, 0.2);
-			background: rgba(218, 85, 101, 0.06);
-			gap: 32px;
-
-			.unintall-integration-bar-text {
-				display: flex;
-				flex-direction: column;
-				gap: 6px;
-
-				.heading {
-					color: var(--callout-error-title);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal;
-					letter-spacing: -0.07px;
-				}
-
-				.subtitle {
-					color: var(--callout-error-description);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 22px; /* 157.143% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.uninstall-integration-btn {
-				border-radius: 2px;
-				background: var(--danger-background);
-				border: none !important;
-				padding: 9px 13px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: var(--l1-foreground);
-				text-align: center;
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 13.3px; /* 110.833% */
-			}
-
-			.uninstall-integration-btn:hover {
-				&.ant-btn-default {
-					color: var(--l1-foreground) !important;
-				}
-			}
-		}
-
-		.loading-container {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
-			height: 160px;
-
-			.skeleton-item {
-				padding: 16px;
-			}
-		}
-	}
-}
-
-.remove-integration-modal {
-	.ant-modal-content {
-		width: 400px;
-		min-height: 200px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		background: var(--l1-background);
-	}
-
-	.ant-modal-footer {
-		margin-top: 28px;
-	}
-
-	.ant-modal-header {
-		background: unset;
-		margin-bottom: 8px;
-	}
-
-	.ant-modal-title {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-
-	.remove-integration-text {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-}
-
-.test-connection-modal {
-	.ant-modal-content {
-		width: 512px;
-		min-height: 170px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-modal-header {
-			margin-bottom: 16px;
-		}
-
-		.ant-modal-body {
-			border-top: 1px solid var(--l1-border);
-			padding-top: 16px;
-		}
-
-		.ant-modal-footer {
-			margin-top: 25px;
-			display: flex;
-			flex-direction: row-reverse;
-
-			.connection-footer {
-				display: flex;
-				width: 100%;
-				.understandBtn {
-					width: 50%;
-					border-radius: 2px;
-					border: 1px solid var(--l2-border);
-					background: var(--l2-background);
-					box-shadow: none;
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 10px; /* 83.333% */
-					letter-spacing: 0.12px;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					height: 34px;
-					padding: 6px;
-					flex-shrink: 0;
-				}
-				.configureBtn {
-					width: 50%;
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 10px; /* 83.333% */
-					letter-spacing: 0.12px;
-					border-radius: 2px;
-					background: var(--primary-background);
-					display: flex;
-					height: 34px;
-					padding: 6px;
-					justify-content: center;
-					align-items: center;
-					gap: 6px;
-					flex: 1 0 0;
-				}
-
-				&.not-pending {
-					flex-direction: row-reverse;
-
-					.understandBtn {
-						width: 131px;
-					}
-				}
-			}
-		}
-	}
-
-	.ant-modal-header {
-		background: unset;
-	}
-
-	.connection-content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.connection-container {
-			padding: 0 10px;
-			height: 37px;
-			display: flex;
-			align-items: center;
-
-			.connection-text {
-				margin: 0px;
-				padding: 0px 0px 0px 10px;
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 22px; /* 157.143% */
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.data-test-connection {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-		}
-		.data-info {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.connection-line {
-				border: 1px dashed var(--l2-border);
-				min-width: 20px;
-				height: 0px;
-				flex-grow: 1;
-				margin: 0px 8px;
-			}
-
-			.last-data {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 22px; /* 157.143% */
-				letter-spacing: -0.07px;
-			}
-
-			.last-value {
-				color: var(--l1-foreground);
-				font-family: 'Space Mono';
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 150% */
-				max-width: 320px;
-			}
-		}
-		.testingConnection {
-			border-radius: 4px;
-			border: 1px solid rgba(255, 205, 86, 0.1);
-			background: rgba(255, 205, 86, 0.1);
-			color: var(--callout-warning-title);
-		}
-
-		.connected {
-			border-radius: 4px;
-			border: 1px solid rgba(37, 225, 146, 0.1);
-			background: rgba(37, 225, 146, 0.1);
-			color: var(--callout-success-title);
-		}
-
-		.connectionFailed {
-			border-radius: 4px;
-			border: 1px solid rgba(218, 85, 101, 0.2);
-			background: rgba(218, 85, 101, 0.06);
-			color: var(--callout-error-title);
-		}
-
-		.noDataSinceLong {
-			border-radius: 4px;
-			border: 1px solid rgba(78, 116, 248, 0.1);
-			background: rgba(78, 116, 248, 0.1);
-			color: var(--callout-primary-description);
-		}
-	}
-}

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

@@ -1,55 +0,0 @@
-.integrations-page {
-	padding: 16px;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-
-	.integrations-content {
-		width: 100%;
-
-		.integrations-listing-container {
-			display: flex;
-			flex-direction: column;
-			gap: 36px;
-		}
-	}
-}
-
-.integrations-not-found-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 120px;
-	padding: 24px;
-	border-radius: 6px;
-	border: 1px solid var(--l1-border);
-	background: var(--l1-background);
-	width: 100%;
-
-	.integrations-not-found-content {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-	}
-
-	.integrations-not-found-text {
-		color: var(--l2-foreground);
-		font-size: var(--font-size-sm);
-		text-align: center;
-	}
-}
-
-.request-entity-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-
-	border-radius: 4px;
-	border: 0.5px solid rgba(78, 116, 248, 0.2);
-	background: rgba(69, 104, 220, 0.1);
-	padding: 12px;
-	margin: 12px;
-}

frontend/src/container/Integrations/Integrations.tsx

@@ -1,59 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import logEvent from 'api/common/logEvent';
-import ROUTES from 'constants/routes';
-import { IntegrationsProps } from 'types/api/integrations/types';
-
-import { INTEGRATION_TELEMETRY_EVENTS } from './constants';
-import IntegrationsHeader from './IntegrationsHeader/IntegrationsHeader';
-import IntegrationsList from './IntegrationsList/IntegrationsList';
-import OneClickIntegrations from './OneClickIntegrations/OneClickIntegrations';
-
-import './Integrations.styles.scss';
-
-function Integrations(): JSX.Element {
-	const history = useHistory();
-	const [searchQuery, setSearchQuery] = useState('');
-
-	const setSelectedIntegration = useCallback(
-		(integration: IntegrationsProps | null) => {
-			if (integration) {
-				logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, {
-					integration,
-				});
-				history.push(`${ROUTES.INTEGRATIONS}/${integration.id}`);
-			} else {
-				history.push(ROUTES.INTEGRATIONS);
-			}
-		},
-		[history],
-	);
-
-	useEffect(() => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED, {});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	return (
-		<div className="integrations-page">
-			<div className="integrations-content">
-				<div className="integrations-listing-container">
-					<IntegrationsHeader
-						searchQuery={searchQuery}
-						onSearchChange={setSearchQuery}
-					/>
-					<OneClickIntegrations
-						searchQuery={searchQuery}
-						setSelectedIntegration={setSelectedIntegration}
-					/>
-					<IntegrationsList
-						searchQuery={searchQuery}
-						setSelectedIntegration={setSelectedIntegration}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default Integrations;

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

@@ -1,75 +0,0 @@
-.integrations-header {
-	.integrations-header__subrow {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 16px;
-		flex-wrap: wrap;
-		margin-top: 4px;
-	}
-
-	.title {
-		color: var(--l1-foreground);
-		font-size: var(--font-size-lg);
-		font-style: normal;
-		line-height: 28px; /* 155.556% */
-		letter-spacing: -0.09px;
-		font-weight: 500;
-		margin: 0;
-	}
-
-	.subtitle {
-		color: var(--l2-foreground);
-		font-size: var(--font-size-sm);
-		font-style: normal;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		font-weight: 400;
-		display: block;
-	}
-
-	.view-data-sources-btn {
-		gap: 8px;
-		padding: 6px 14px;
-		height: 32px;
-		font-size: 12px;
-		font-weight: 500;
-		white-space: nowrap;
-	}
-
-	.integrations-search-request-container {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-top: 16px;
-	}
-}
-
-.request-integration-dialog {
-	.request-integration-form {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.request-integration-input {
-			width: 100%;
-			color: var(--l1-foreground);
-		}
-	}
-
-	.request-integration-form-title {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-	}
-
-	.request-integration-form-footer {
-		margin-top: 16px;
-		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
-	}
-}

frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx

@@ -1,166 +0,0 @@
-import { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import { DialogWrapper } from '@signozhq/dialog';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
-import { Flex, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import ROUTES from 'constants/routes';
-import { ArrowRight, Cable, Check } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
-import { routePermission } from 'utils/permission';
-
-import './IntegrationsHeader.styles.scss';
-
-interface IntegrationsHeaderProps {
-	searchQuery: string;
-	onSearchChange: (value: string) => void;
-}
-
-function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
-	const history = useHistory();
-	const { user } = useAppContext();
-
-	const { searchQuery, onSearchChange } = props;
-	const [
-		isRequestIntegrationDialogOpen,
-		setIsRequestIntegrationDialogOpen,
-	] = useState(false);
-
-	const [
-		isSubmittingRequestForIntegration,
-		setIsSubmittingRequestForIntegration,
-	] = useState(false);
-
-	const [requestedIntegrationName, setRequestedIntegrationName] = useState('');
-
-	const isGetStartedWithCloudAllowed = routePermission.GET_STARTED_WITH_CLOUD.includes(
-		user.role,
-	);
-
-	const handleRequestIntegrationSubmit = async (): Promise<void> => {
-		try {
-			setIsSubmittingRequestForIntegration(true);
-			const eventName = 'Integration requested';
-			const screenName = 'Integration list page';
-
-			const response = await logEvent(eventName, {
-				screen: screenName,
-				integration: requestedIntegrationName,
-			});
-
-			if (response.statusCode === 200) {
-				toast.success('Integration Request Submitted', {
-					position: 'top-right',
-				});
-				setRequestedIntegrationName('');
-				setIsRequestIntegrationDialogOpen(false);
-				setIsSubmittingRequestForIntegration(false);
-			} else {
-				toast.error(response.error || 'Something went wrong', {
-					position: 'top-right',
-				});
-
-				setIsSubmittingRequestForIntegration(false);
-			}
-		} catch (error) {
-			toast.error('Something went wrong', {
-				position: 'top-right',
-			});
-			setIsSubmittingRequestForIntegration(false);
-		}
-	};
-
-	return (
-		<div className="integrations-header">
-			<Typography.Title className="title">Integrations</Typography.Title>
-			<Flex
-				justify="space-between"
-				align="center"
-				className="integrations-header__subrow"
-			>
-				<Typography.Text className="subtitle">
-					Manage integrations for this workspace.
-				</Typography.Text>
-			</Flex>
-
-			<div className="integrations-search-request-container">
-				<Input
-					placeholder="Search for an integration..."
-					value={searchQuery}
-					onChange={(e): void => onSearchChange(e.target.value)}
-				/>
-				<Button
-					variant="solid"
-					color="secondary"
-					className="request-integration-btn"
-					prefixIcon={<Cable size={14} />}
-					size="sm"
-					onClick={(): void => setIsRequestIntegrationDialogOpen(true)}
-				>
-					Request Integration
-				</Button>
-
-				<DialogWrapper
-					className="request-integration-dialog"
-					title="Request New Integration"
-					open={isRequestIntegrationDialogOpen}
-					onOpenChange={setIsRequestIntegrationDialogOpen}
-				>
-					<div className="request-integration-form">
-						<div className="request-integration-form-title">
-							Which integration are you looking for?
-						</div>
-						<Input
-							className="request-integration-input"
-							placeholder="Enter integration name..."
-							value={requestedIntegrationName}
-							onChange={(e): void => {
-								setRequestedIntegrationName(e.target.value);
-							}}
-							onKeyDown={(e): void => {
-								if (e.key === 'Enter' && requestedIntegrationName?.trim().length > 0) {
-									handleRequestIntegrationSubmit();
-								}
-							}}
-							disabled={isSubmittingRequestForIntegration}
-						/>
-					</div>
-
-					<div className="request-integration-form-footer">
-						<Button
-							variant="solid"
-							color="primary"
-							size="sm"
-							prefixIcon={<Check size={14} />}
-							onClick={handleRequestIntegrationSubmit}
-							loading={isSubmittingRequestForIntegration}
-							disabled={
-								isSubmittingRequestForIntegration ||
-								!requestedIntegrationName ||
-								requestedIntegrationName?.trim().length === 0
-							}
-						>
-							Submit
-						</Button>
-					</div>
-				</DialogWrapper>
-
-				{isGetStartedWithCloudAllowed && (
-					<Button
-						variant="solid"
-						color="secondary"
-						className="view-data-sources-btn"
-						onClick={(): void => history.push(ROUTES.GET_STARTED_WITH_CLOUD)}
-					>
-						<span>View 150+ Data Sources</span>
-						<ArrowRight size={14} />
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default IntegrationsHeader;