fix(alerts-downtime): capture load-time GETs before navigation

Flow 1 registered cap.mark() AFTER page.goto() and then called
page.waitForResponse(/api/v2/rules) — but against a fast local backend
the GET /api/v2/rules response arrived during page.goto, before the
waiter could register, and the test timed out at 30s.

installCapture's page.on('response') listener runs from before the
navigation, so moving mark() above page.goto() and relying on
dumpSince's 500ms drain is enough. No lost precision.

One site only; the same pattern exists in later flows (via per-action
waitForResponse) and may surface similar races — those are left for a
follow-up once the backend-side 2095 migration lands on main (current
frontend still calls PATCH /api/v1/rules/:id which the spec's assertion
doesn't match anyway).

.github/CODEOWNERS

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

.github/workflows/integrationci.yaml

@@ -25,11 +25,11 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: fmt
         run: |
           make py-fmt
-          git diff --exit-code -- tests/integration/
+          git diff --exit-code -- tests/
       - name: lint
         run: |
           make py-lint
@@ -79,7 +79,7 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: webdriver
         run: |
           wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
@@ -99,10 +99,10 @@ jobs:
           google-chrome-stable --version
       - name: run
         run: |
-          cd tests/integration && \
+          cd tests && \
             uv run pytest \
             --basetemp=./tmp/ \
-            src/${{matrix.src}} \
+            integration/src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
             --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \

Makefile

@@ -201,26 +201,26 @@ docker-buildx-enterprise: go-build-enterprise js-build
 # python commands
 ##############################################################
 .PHONY: py-fmt
-py-fmt: ## Run black for integration tests
-	@cd tests/integration && uv run black .
+py-fmt: ## Run black across the shared tests project
+	@cd tests && uv run black .
 
 .PHONY: py-lint
-py-lint: ## Run lint for integration tests
-	@cd tests/integration && uv run isort .
-	@cd tests/integration && uv run autoflake .
-	@cd tests/integration && uv run pylint .
+py-lint: ## Run lint across the shared tests project
+	@cd tests && uv run isort .
+	@cd tests && uv run autoflake .
+	@cd tests && uv run pylint .
 
 .PHONY: py-test-setup
-py-test-setup: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no src/bootstrap/setup.py::test_setup
+py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/src/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
-py-test-teardown: ## Runs integration tests with teardown
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  src/bootstrap/setup.py::test_teardown
+py-test-teardown: ## Tear down the shared SigNoz backend
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  integration/src/bootstrap/setup.py::test_teardown
 
 .PHONY: py-test
 py-test: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --capture=no src/
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --capture=no integration/src/
 
 .PHONY: py-clean
 py-clean: ## Clear all pycache and pytest cache from tests directory recursively

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

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

frontend/package.json

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

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

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

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

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

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

frontend/src/components/cmdKPalette/cmdKPalette.scss

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

frontend/src/constants/routes.ts

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

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FormInstance } from 'antd';
-import { ConnectionParams } from 'types/api/integrations/aws';
+import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 export enum ActiveViewEnum {
 	SELECT_REGIONS = 'select-regions',
@@ -11,23 +11,27 @@ 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?: ConnectionParams;
+	connectionParams?: CloudintegrationtypesCredentialsDTO;
 	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/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.styles.scss

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

@@ -1,13 +1,18 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Form, Select, Skeleton, Typography } from 'antd';
-import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+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 useUrlQuery from 'hooks/useUrlQuery';
 
-const { Title } = Typography;
+import { mapAccountDtoToAwsCloudAccount } from '../mapAwsCloudAccountFromDto';
+import { CloudAccount } from '../types';
+
+import './S3BucketsSelector.styles.scss';
 
 interface S3BucketsSelectorProps {
 	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
 	initialBucketsByRegion?: Record<string, string[]>;
+	disabled?: boolean;
 }
 
 /**
@@ -17,13 +22,29 @@ interface S3BucketsSelectorProps {
 function S3BucketsSelector({
 	onChange,
 	initialBucketsByRegion = {},
+	disabled: isSelectorDisabled = false,
 }: S3BucketsSelectorProps): JSX.Element {
 	const cloudAccountId = useUrlQuery().get('cloudAccountId');
-	const { data: accounts, isLoading } = useAwsAccounts();
+	const { data: listAccountsResponse, isLoading } = useListAccounts({
+		cloudProvider: INTEGRATION_TYPES.AWS,
+	});
+	const accounts = useMemo((): CloudAccount[] | undefined => {
+		const raw = listAccountsResponse?.data?.accounts;
+		if (!raw) {
+			return undefined;
+		}
+		return raw
+			.map(mapAccountDtoToAwsCloudAccount)
+			.filter((account): account is CloudAccount => account !== null);
+	}, [listAccountsResponse]);
 	const [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(
 		() =>
@@ -81,37 +102,41 @@ function S3BucketsSelector({
 
 	return (
 		<div className="s3-buckets-selector">
-			<Title level={5}>Select S3 Buckets by Region</Title>
+			<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);
 
-			{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>
-				);
-			})}
+					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>
 		</div>
 	);
 }

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

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

@@ -0,0 +1,86 @@
+/* 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

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

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

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

@@ -1,4 +1,8 @@
 .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;
@@ -18,21 +22,60 @@
 		background: var(--primary-background);
 	}
 }
+
 .services-section {
 	display: flex;
-	gap: 10px;
+	flex: 1;
+	min-height: 0;
+
 	&__sidebar {
-		width: 16%;
-		padding: 0 16px;
+		width: 240px;
+		border-right: 1px solid var(--l2-border);
+		height: 100%;
 	}
 
 	&__content {
-		width: 84%;
-		padding: 16px;
+		flex: 1;
+		height: 100%;
 	}
 }
+
+.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: 16px 0;
+	padding: 12px;
+
 	.ant-select-selector {
 		background-color: var(--l3-background) !important;
 		border: 1px solid var(--l1-border) !important;
@@ -46,6 +89,111 @@
 	}
 }
 
+.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;
@@ -60,20 +208,22 @@
 	}
 
 	&.active {
-		background-color: var(--bg-ink-100); /* keep: no semantic equivalent */
+		background-color: var(--l3-background);
 	}
 	&__icon-wrapper {
-		height: 40px;
-		width: 40px;
+		height: 32px;
+		width: 32px;
 		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: 24px;
-			height: 24px;
+			width: 16px;
+			height: 16px;
+			object-fit: contain;
 		}
 	}
 	&__title {
@@ -90,11 +240,13 @@
 	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 {
@@ -105,6 +257,7 @@
 			letter-spacing: -0.07px;
 			text-align: left;
 		}
+
 		.service-details__right-actions {
 			display: flex;
 			align-items: center;
@@ -120,19 +273,30 @@
 				border-radius: 2px;
 				line-height: normal;
 				&--connected {
-					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);
+					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);
 				}
 				&--stale-data {
-					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);
+					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);
 				}
 				&--no-data {
-					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);
+					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);
 				}
 			}
 
@@ -157,21 +321,28 @@
 			}
 		}
 	}
+
 	&__overview {
 		color: var(--l2-foreground);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
-		width: 800px;
+		width: 100%;
+
+		padding: 8px 12px;
 	}
+
 	&__tabs {
+		padding: 0px 12px 12px 8px;
+
 		.ant-tabs {
 			&-ink-bar {
 				background-color: transparent;
 			}
 			&-nav {
-				padding: 8px 0 18px;
+				padding: 0;
+
 				&-wrap {
 					padding: 0;
 				}
@@ -290,153 +461,3 @@
 		}
 	}
 }
-
-.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/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.tsx

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

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

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

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

@@ -0,0 +1,25 @@
+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/AmazonWebServices/types.ts

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+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/Header/Header.styles.scss

@@ -3,7 +3,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 8px 18px;
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--border);
 
 	&__navigation {
 		display: flex;
@@ -18,7 +18,7 @@
 	}
 
 	&__breadcrumb-title {
-		color: var(--l2-foreground);
+		color: var(--l1-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(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--border);
+		background: var(--card);
 		border-radius: 2px;
 		font-size: 12px;
 		line-height: 10px;
@@ -39,9 +39,11 @@
 		width: 113px;
 		height: 32px;
 		cursor: pointer;
-		&,
+		color: var(--l1-foreground);
+
 		&:hover {
-			color: var(--l2-foreground);
+			border-color: var(--l2-border);
+			color: var(--l1-foreground);
 		}
 	}
 }

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

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

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

@@ -0,0 +1,5 @@
+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/IntegrationDetailContentTabs/Configure.tsx

@@ -3,7 +3,7 @@ import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
 
 import './IntegrationDetailContentTabs.styles.scss';
 

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

@@ -41,9 +41,9 @@
 				.category-tab {
 					padding: 2px 8px;
 					border-radius: 4px;
-					border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-					background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-					color: var(--bg-sienna-400);
+					border: 1px solid color-mix(in srgb, var(--accent-sienna) 20%, transparent);
+					background: color-mix(in srgb, var(--accent-sienna) 10%, transparent);
+					color: var(--accent-sienna-hover);
 					font-family: Inter;
 					font-size: 14px;
 					font-style: normal;
@@ -223,56 +223,3 @@
 		overflow-y: auto;
 	}
 }
-
-.lightMode {
-	.integration-detail-overview {
-		.integration-detail-overview-left-container {
-			.integration-detail-overview-category {
-				.category-tabs {
-					.category-tab {
-						border: 1px solid var(--bg-sienna-600);
-						background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-						color: var(--bg-sienna-500);
-					}
-				}
-			}
-		}
-	}
-
-	.integration-data-collected {
-		.logs-section {
-			.table-row-dark {
-				background: var(--l3-background);
-			}
-
-			.logs-section-table {
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
-		}
-
-		.metrics-section {
-			.table-row-dark {
-				background: var(--l3-background);
-			}
-
-			.metrics-section-table {
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
-		}
-	}
-
-	.integration-detail-configure {
-		.configure-menu {
-			.configure-menu-item:hover {
-				background-color: var(--l2-background);
-			}
-
-			.active {
-				color: var(--l1-foreground);
-				background-color: var(--l2-background);
-			}
-		}
-	}
-}

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
-import { Button, Modal, Tooltip, Typography } from 'antd';
+import { Button, Modal, Skeleton, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import installIntegration from 'api/Integrations/installIntegration';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
@@ -9,10 +9,10 @@ import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowLeftRight, Check } from 'lucide-react';
+import { ArrowLeftRight, Cable, Check } from 'lucide-react';
 import { IntegrationConnectionStatus } from 'types/api/integrations/types';
 
-import { INTEGRATION_TELEMETRY_EVENTS } from '../utils';
+import { INTEGRATION_TELEMETRY_EVENTS } from '../constants';
 import TestConnection, { ConnectionStates } from './TestConnection';
 
 import './IntegrationDetailPage.styles.scss';
@@ -26,6 +26,7 @@ interface IntegrationDetailHeaderProps {
 	connectionState: ConnectionStates;
 	connectionData: IntegrationConnectionStatus;
 	setActiveDetailTab: React.Dispatch<React.SetStateAction<string | null>>;
+	isLoading: boolean;
 }
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function IntegrationDetailHeader(
@@ -38,6 +39,7 @@ function IntegrationDetailHeader(
 		description,
 		connectionState,
 		connectionData,
+		isLoading,
 		onUnInstallSuccess,
 		setActiveDetailTab,
 	} = props;
@@ -114,16 +116,29 @@ function IntegrationDetailHeader(
 
 	const isConnectionStateNotInstalled =
 		connectionState === ConnectionStates.NotInstalled;
+
 	return (
 		<div className="integration-connection-header">
 			<div className="integration-detail-header" key={id}>
-				<div style={{ display: 'flex', gap: '10px' }}>
+				<div className="integration-detail-header-icon-title-container">
 					<div className="image-container">
-						<img src={icon} alt={title} className="image" />
+						{icon ? (
+							<img src={icon} alt={title} className="image" />
+						) : (
+							<div className="image-placeholder">
+								<Cable size={24} />
+							</div>
+						)}
 					</div>
 					<div className="details">
-						<Typography.Text className="heading">{title}</Typography.Text>
-						<Typography.Text className="description">{description}</Typography.Text>
+						{isLoading ? (
+							<Skeleton.Input active className="skeleton-item" />
+						) : (
+							<>
+								<Typography.Text className="heading">{title}</Typography.Text>
+								<Typography.Text className="description">{description}</Typography.Text>
+							</>
+						)}
 					</div>
 				</div>
 				<Button
@@ -132,7 +147,7 @@ function IntegrationDetailHeader(
 						!isConnectionStateNotInstalled && 'test-connection',
 					)}
 					icon={<ArrowLeftRight size={14} />}
-					disabled={isInstallLoading}
+					disabled={isInstallLoading || isLoading}
 					onClick={(): void => {
 						if (connectionState === ConnectionStates.NotInstalled) {
 							logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, {

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

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

@@ -1,5 +1,9 @@
+import { useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Skeleton, Typography } from 'antd';
+import { Flex, Skeleton, Typography } from 'antd';
+import ROUTES from 'constants/routes';
 import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
 import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -8,6 +12,9 @@ import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
+import CloudIntegration from '../CloudIntegration/CloudIntegration';
+import { INTEGRATION_TYPES } from '../constants';
+import { IntegrationType } from '../types';
 import { handleContactSupport } from '../utils';
 import IntegrationDetailContent from './IntegrationDetailContent';
 import IntegrationDetailHeader from './IntegrationDetailHeader';
@@ -17,20 +24,13 @@ import { getConnectionStatesFromConnectionStatus } from './utils';
 
 import './IntegrationDetailPage.styles.scss';
 
-interface IntegrationDetailPageProps {
-	selectedIntegration: string;
-	setSelectedIntegration: (id: string | null) => void;
-	activeDetailTab: string;
-	setActiveDetailTab: React.Dispatch<React.SetStateAction<string | null>>;
-}
-
-function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
-	const {
-		selectedIntegration,
-		setSelectedIntegration,
-		activeDetailTab,
-		setActiveDetailTab,
-	} = props;
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function IntegrationDetailPage(): JSX.Element {
+	const history = useHistory();
+	const { integrationId } = useParams<{ integrationId?: string }>();
+	const [activeDetailTab, setActiveDetailTab] = useState<string | null>(
+		'overview',
+	);
 
 	const {
 		data,
@@ -40,7 +40,7 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 		isRefetching,
 		isError,
 	} = useGetIntegration({
-		integrationId: selectedIntegration,
+		integrationId: integrationId || '',
 	});
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
@@ -49,7 +49,7 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 		data: integrationStatus,
 		isLoading: isStatusLoading,
 	} = useGetIntegrationStatus({
-		integrationId: selectedIntegration,
+		integrationId: integrationId || '',
 	});
 
 	const loading = isLoading || isFetching || isRefetching || isStatusLoading;
@@ -63,27 +63,27 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 		),
 	);
 
+	if (integrationId === INTEGRATION_TYPES.AWS) {
+		return <CloudIntegration type={IntegrationType.AWS_SERVICES} />;
+	}
+
 	return (
-		<div className="integration-detail-content">
+		<div className="integration-details-container">
 			<Flex justify="space-between" align="center">
 				<Button
-					type="text"
-					icon={<ArrowLeft size={14} />}
+					variant="link"
+					color="secondary"
+					prefixIcon={<ArrowLeft size={14} />}
 					className="all-integrations-btn"
 					onClick={(): void => {
-						setSelectedIntegration(null);
+						history.push(ROUTES.INTEGRATIONS);
 					}}
 				>
 					All Integrations
 				</Button>
 			</Flex>
 
-			{loading ? (
-				<div className="loading-integration-details">
-					<Skeleton.Input active size="large" className="skeleton-1" />
-					<Skeleton.Input active size="large" className="skeleton-2" />
-				</div>
-			) : isError ? (
+			{isError && (
 				<div className="error-container">
 					<div className="error-content">
 						<img src={awwSnapUrl} alt="error-emoji" className="error-state-svg" />
@@ -92,10 +92,10 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 						</Typography.Text>
 						<div className="error-btns">
 							<Button
-								type="primary"
-								className="retry-btn"
+								variant="solid"
+								color="primary"
 								onClick={(): Promise<any> => refetch()}
-								icon={<RotateCw size={14} />}
+								prefixIcon={<RotateCw size={14} />}
 							>
 								Retry
 							</Button>
@@ -110,39 +110,51 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 						</div>
 					</div>
 				</div>
-			) : (
-				integrationData && (
-					<>
-						<IntegrationDetailHeader
-							id={selectedIntegration}
-							title={defaultTo(integrationData?.title, '')}
-							description={defaultTo(integrationData?.description, '')}
-							icon={defaultTo(integrationData?.icon, '')}
-							connectionState={connectionStatus}
-							connectionData={defaultTo(integrationStatus?.data.data, {
-								logs: null,
-								metrics: null,
-							})}
-							onUnInstallSuccess={refetch}
-							setActiveDetailTab={setActiveDetailTab}
-						/>
-						<IntegrationDetailContent
-							activeDetailTab={activeDetailTab}
-							integrationData={integrationData}
-							integrationId={selectedIntegration}
-							setActiveDetailTab={setActiveDetailTab}
-						/>
+			)}
 
-						{connectionStatus !== ConnectionStates.NotInstalled && (
+			{!isError && (
+				<div className="integration-details-content-container">
+					<IntegrationDetailHeader
+						id={integrationId || ''}
+						title={defaultTo(integrationData?.title, '')}
+						description={defaultTo(integrationData?.description, '')}
+						icon={defaultTo(integrationData?.icon, '')}
+						connectionState={connectionStatus}
+						connectionData={defaultTo(integrationStatus?.data.data, {
+							logs: null,
+							metrics: null,
+						})}
+						onUnInstallSuccess={refetch}
+						setActiveDetailTab={setActiveDetailTab}
+						isLoading={loading}
+					/>
+
+					{loading && (
+						<div className="loading-container">
+							<Skeleton active className="skeleton-item" />
+						</div>
+					)}
+
+					{!isError && !loading && integrationData && (
+						<IntegrationDetailContent
+							activeDetailTab={activeDetailTab || 'overview'}
+							integrationData={integrationData}
+							integrationId={integrationId || ''}
+							setActiveDetailTab={setActiveDetailTab}
+						/>
+					)}
+
+					{!isError &&
+						!loading &&
+						connectionStatus !== ConnectionStates.NotInstalled && (
 							<IntergrationsUninstallBar
 								integrationTitle={defaultTo(integrationData?.title, '')}
-								integrationId={selectedIntegration}
+								integrationId={integrationId || ''}
 								onUnInstallSuccess={refetch}
 								connectionStatus={connectionStatus}
 							/>
 						)}
-					</>
-				)
+				</div>
 			)}
 		</div>
 	);

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx

@@ -7,7 +7,7 @@ import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useNotifications } from 'hooks/useNotifications';
 import { X } from 'lucide-react';
 
-import { INTEGRATION_TELEMETRY_EVENTS } from '../utils';
+import { INTEGRATION_TELEMETRY_EVENTS } from '../constants';
 import { ConnectionStates } from './TestConnection';
 
 import './IntegrationDetailPage.styles.scss';

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

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

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

@@ -0,0 +1,79 @@
+.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;
+
+		input {
+			color: var(--l1-foreground);
+		}
+	}
+}
+
+.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

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

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

@@ -0,0 +1,237 @@
+.integrations-list-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.integrations-list-title {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 20px; /* 166.667% */
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	.error-container {
+		display: flex;
+		border-radius: 6px;
+		border: 1px solid var(--l3-background);
+		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;
+			}
+		}
+	}
+
+	.integrations-list-title-header {
+		display: flex;
+		flex-direction: row;
+		gap: 32px;
+		align-items: center;
+
+		.integrations-list-header-title {
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 166.667% */
+			letter-spacing: 0.48px;
+			text-transform: uppercase;
+
+			word-wrap: normal;
+			white-space: nowrap;
+		}
+
+		.integrations-list-header-dotted-double-line {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.integrations-list {
+		display: flex;
+		flex-direction: column;
+		margin-left: -16px;
+		margin-right: -16px;
+
+		.integrations-list-header {
+			display: flex;
+			flex-direction: row;
+			gap: 10px;
+			align-items: center;
+
+			padding: 8px 16px;
+
+			.integrations-list-header-column {
+				flex: 1;
+
+				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;
+
+				&.title-column {
+					flex: 2;
+				}
+
+				&.published-by-column {
+					flex: 1;
+				}
+
+				&.installation-status-column {
+					flex: 1;
+				}
+			}
+		}
+
+		.integrations-list-item {
+			display: flex;
+			flex-direction: row;
+			gap: 10px;
+			padding: 8px 16px;
+			color: var(--l1-foreground);
+
+			cursor: pointer;
+
+			.integrations-list-item-name-image-container {
+				display: flex;
+				flex-direction: row;
+				gap: 10px;
+				align-items: center;
+				padding: 4px;
+
+				border: 1px solid var(--l3-border);
+				background: var(--l3-background);
+				border-radius: 2px;
+
+				.integrations-list-item-name-image-container-image {
+					height: 12px;
+					width: 12px;
+				}
+			}
+
+			&:nth-child(even) {
+				background: var(--l2-background);
+			}
+
+			&:hover {
+				background: var(--l3-background-hover);
+			}
+		}
+
+		.integrations-list-item-column {
+			display: flex;
+			flex-direction: row;
+			gap: 10px;
+			align-items: center;
+
+			flex: 1;
+
+			&.title-column {
+				display: flex;
+				flex-direction: row;
+				gap: 10px;
+				align-items: center;
+				flex: 2;
+			}
+
+			&.installation-status-column {
+				display: flex;
+				flex-direction: row;
+				gap: 10px;
+				align-items: center;
+			}
+
+			&.published-by-column {
+				display: flex;
+				flex-direction: row;
+				gap: 10px;
+				align-items: center;
+			}
+		}
+	}
+
+	.loading-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin-top: 16px;
+
+		.skeleton-item {
+			height: 32px;
+			width: 100%;
+		}
+	}
+}
+
+.integrations-list {
+	.error-container {
+		background: var(--l1-background);
+	}
+
+	.integrations-list-item {
+		.list-item-image-container {
+			border: 1.111px solid var(--l3-background);
+			background: var(--l1-background);
+		}
+
+		.list-item-details {
+			.heading {
+				color: var(--l1-foreground);
+			}
+
+			.description {
+				color: var(--l2-foreground);
+			}
+		}
+
+		.configure-btn {
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+			color: var(--l1-foreground);
+		}
+	}
+}

frontend/src/container/Integrations/IntegrationsList/IntegrationsList.tsx

@@ -0,0 +1,183 @@
+import { useMemo } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Badge } from '@signozhq/ui';
+import { Button, Skeleton, Typography } from 'antd';
+import { useGetAllIntegrations } from 'hooks/Integrations/useGetAllIntegrations';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { MoveUpRight, RotateCw } from 'lucide-react';
+import { IntegrationsProps } from 'types/api/integrations/types';
+
+import awwSnapIconUrl from '@/assets/Icons/awwSnap.svg';
+import dottedDoubleLineUrl from '@/assets/svgs/dotted-double-line.svg';
+
+import { handleContactSupport } from '../utils';
+
+import './IntegrationsList.styles.scss';
+
+interface IntegrationsListProps {
+	searchQuery: string;
+	setSelectedIntegration: (integration: IntegrationsProps) => void;
+}
+
+function IntegrationsList(props: IntegrationsListProps): JSX.Element {
+	const { searchQuery, setSelectedIntegration } = props;
+
+	const {
+		data,
+		isFetching,
+		isLoading,
+		isRefetching,
+		isError,
+		refetch,
+	} = useGetAllIntegrations();
+
+	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+
+	const integrationsList = useMemo(() => {
+		if (!data?.data.data.integrations) {
+			return [];
+		}
+		const integrations = data.data.data.integrations;
+		const query = searchQuery.trim().toLowerCase();
+		if (!query) {
+			return integrations;
+		}
+		return integrations.filter(
+			(integration) =>
+				integration.title.toLowerCase().includes(query) ||
+				integration.description.toLowerCase().includes(query),
+		);
+	}, [data?.data.data.integrations, searchQuery]);
+
+	const loading = isLoading || isFetching || isRefetching;
+
+	const handleSelectedIntegration = (integration: IntegrationsProps): void => {
+		setSelectedIntegration(integration);
+	};
+
+	const renderError = (): JSX.Element => {
+		return (
+			<div className="error-container">
+				<div className="error-content">
+					<img src={awwSnapIconUrl} alt="error-emoji" className="error-state-svg" />
+					<Typography.Text>
+						Something went wrong :/ Please retry or contact support.
+					</Typography.Text>
+					<div className="error-btns">
+						<Button
+							type="primary"
+							className="retry-btn"
+							onClick={(): Promise<any> => refetch()}
+							icon={<RotateCw size={14} />}
+						>
+							Retry
+						</Button>
+						<div
+							className="contact-support"
+							onClick={(): void => handleContactSupport(isCloudUserVal)}
+						>
+							<Typography.Link className="text">Contact Support </Typography.Link>
+
+							<MoveUpRight size={14} color={Color.BG_ROBIN_400} />
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className="integrations-list-container">
+			<div className="integrations-list-title-header">
+				<div className="integrations-list-header-title">All Integrations</div>
+				<div className="integrations-list-header-dotted-double-line">
+					<img
+						src={dottedDoubleLineUrl}
+						alt="dotted-double-line"
+						width="100%"
+						height="100%"
+					/>
+				</div>
+			</div>
+
+			{!loading && isError && renderError()}
+
+			{loading && (
+				<div className="loading-container">
+					<Skeleton.Input active size="large" className="skeleton-item" />
+					<Skeleton.Input active size="large" className="skeleton-item" />
+					<Skeleton.Input active size="large" className="skeleton-item" />
+					<Skeleton.Input active size="large" className="skeleton-item" />
+					<Skeleton.Input active size="large" className="skeleton-item" />
+				</div>
+			)}
+
+			{!loading && integrationsList.length === 0 && searchQuery.trim() && (
+				<div className="integrations-not-found-container">
+					<div className="integrations-not-found-content">
+						<img
+							src={awwSnapIconUrl}
+							alt="no-integrations"
+							className="integrations-not-found-image"
+						/>
+						<div className="integrations-not-found-text">
+							No integrations found for &ldquo;{searchQuery.trim()}&rdquo;
+						</div>
+					</div>
+				</div>
+			)}
+
+			{!loading && integrationsList.length > 0 && (
+				<div className="integrations-list">
+					<div className="integrations-list-header">
+						<div className="integrations-list-header-column title-column">Name</div>
+						<div className="integrations-list-header-column published-by-column">
+							Published By
+						</div>
+						<div className="integrations-list-header-column installation-status-column">
+							Status
+						</div>
+					</div>
+
+					{integrationsList.map((integration) => (
+						<div
+							className="integrations-list-item"
+							key={integration.id}
+							onClick={(): void => handleSelectedIntegration(integration)}
+						>
+							<div className="integrations-list-item-column title-column">
+								<div className="integrations-list-item-name-image-container">
+									<img
+										src={integration.icon}
+										alt={integration.title}
+										className="integrations-list-item-name-image-container-image"
+									/>
+								</div>
+
+								<div className="integrations-list-item-name-text">
+									{integration.title}
+								</div>
+							</div>
+							<div className="integrations-list-item-column">
+								<div className="integrations-list-item-published-by">SigNoz</div>
+							</div>
+							<div className="integrations-list-item-column">
+								<div className="integrations-list-item-installation-status">
+									<Badge
+										color={integration.is_installed ? 'forest' : 'amber'}
+										variant="outline"
+										capitalize
+									>
+										{integration.is_installed ? 'Installed' : 'Not Installed'}
+									</Badge>
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default IntegrationsList;

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

@@ -0,0 +1,82 @@
+.one-click-integrations {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.one-click-integrations-header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		gap: 32px;
+
+		.one-click-integrations-header-title {
+			color: var(--l1-foreground);
+			font-size: 12px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: 0.48px;
+			text-transform: uppercase;
+
+			display: inline-block;
+			word-wrap: normal;
+			white-space: nowrap;
+		}
+		.one-click-integrations-header-dotted-double-line {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.one-click-integrations-list {
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+
+		.one-click-integrations-list-item {
+			display: flex;
+			flex-direction: column;
+			padding: 8px 12px 12px 12px;
+			gap: 10px;
+			width: fit-content;
+
+			border-radius: 3px;
+			border: 1px solid var(--l3-background);
+			background: var(--l2-background);
+			cursor: pointer;
+			transition: background 0.2s ease-in-out;
+
+			.one-click-integrations-list-item-title {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+
+				.one-click-integrations-list-item-title-image-container {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					gap: 10px;
+
+					.one-click-integrations-list-item-title-text {
+						color: var(--l1-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 500;
+						line-height: 32px; /* 200% */
+						letter-spacing: -0.08px;
+					}
+				}
+			}
+
+			.one-click-integrations-list-item-description {
+				color: var(--l2-foreground);
+			}
+
+			&:hover {
+				background: var(--l3-background);
+			}
+		}
+	}
+}

frontend/src/container/Integrations/OneClickIntegrations/OneClickIntegrations.tsx

@@ -0,0 +1,103 @@
+import { useMemo } from 'react';
+import { Badge } from '@signozhq/ui';
+import { IntegrationsProps } from 'types/api/integrations/types';
+
+import awwSnapIconUrl from '@/assets/Icons/awwSnap.svg';
+import dottedDoubleLineUrl from '@/assets/svgs/dotted-double-line.svg';
+
+import { ONE_CLICK_INTEGRATIONS } from '../constants';
+
+import './OneClickIntegrations.styles.scss';
+
+interface OneClickIntegrationsProps {
+	searchQuery: string;
+	setSelectedIntegration: (integration: IntegrationsProps) => void;
+}
+
+function OneClickIntegrations(props: OneClickIntegrationsProps): JSX.Element {
+	const { searchQuery, setSelectedIntegration } = props;
+
+	const filteredIntegrations = useMemo(() => {
+		const query = searchQuery.trim().toLowerCase();
+		if (!query) {
+			return ONE_CLICK_INTEGRATIONS;
+		}
+		return ONE_CLICK_INTEGRATIONS.filter(
+			(integration) =>
+				integration.title.toLowerCase().includes(query) ||
+				integration.description.toLowerCase().includes(query),
+		);
+	}, [searchQuery]);
+
+	const handleSelectedIntegration = (integration: IntegrationsProps): void => {
+		setSelectedIntegration(integration);
+	};
+
+	return (
+		<div className="one-click-integrations">
+			<div className="one-click-integrations-header">
+				<div className="one-click-integrations-header-title">
+					One Click Integrations
+				</div>
+
+				<div className="one-click-integrations-header-dotted-double-line">
+					<img
+						src={dottedDoubleLineUrl}
+						alt="dotted-double-line"
+						width="100%"
+						height="100%"
+					/>
+				</div>
+			</div>
+
+			<div className="one-click-integrations-list">
+				{filteredIntegrations.length === 0 && searchQuery.trim() ? (
+					<div className="integrations-not-found-container">
+						<div className="integrations-not-found-content">
+							<img
+								src={awwSnapIconUrl}
+								alt="no-integrations"
+								className="integrations-not-found-image"
+							/>
+							<div className="integrations-not-found-text">
+								No integrations found for &ldquo;{searchQuery.trim()}&rdquo;
+							</div>
+						</div>
+					</div>
+				) : (
+					<>
+						{filteredIntegrations.map((integration) => (
+							<div
+								className="one-click-integrations-list-item"
+								key={integration.id}
+								onClick={(): void => handleSelectedIntegration(integration)}
+							>
+								<div className="one-click-integrations-list-item-title">
+									<div className="one-click-integrations-list-item-title-image-container">
+										<img src={integration.icon} alt={integration.title} />
+										<div className="one-click-integrations-list-item-title-text">
+											{integration.title}
+										</div>
+									</div>
+									{integration.is_new && (
+										<div className="one-click-integrations-list-item-new-tag">
+											<Badge color="robin" variant="default">
+												NEW
+											</Badge>
+										</div>
+									)}
+								</div>
+
+								<div className="one-click-integrations-list-item-description">
+									{integration.description}
+								</div>
+							</div>
+						))}
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default OneClickIntegrations;

frontend/src/container/Integrations/RequestIntegrationBtn.tsx

@@ -3,16 +3,12 @@ import { useTranslation } from 'react-i18next';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Input, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { IntegrationType } from 'container/Integrations/types';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check } from 'lucide-react';
 
 import './Integrations.styles.scss';
 
-export enum IntegrationType {
-	AWS_SERVICES = 'aws-services',
-	INTEGRATIONS_LIST = 'integrations-list',
-}
-
 interface RequestIntegrationBtnProps {
 	type?: IntegrationType;
 	message?: string;
@@ -113,8 +109,3 @@ export function RequestIntegrationBtn({
 		</div>
 	);
 }
-
-RequestIntegrationBtn.defaultProps = {
-	type: IntegrationType.INTEGRATIONS_LIST,
-	message: "Can't find what you’re looking for? Request more integrations",
-};

frontend/src/container/Integrations/constants.ts

@@ -0,0 +1,166 @@
+import awsDarkLogo from '@/assets/Logos/aws-dark.svg';
+import azureOpenaiLogo from '@/assets/Logos/azure-openai.svg';
+
+import { AzureRegion } from './types';
+
+export const INTEGRATION_TELEMETRY_EVENTS = {
+	INTEGRATIONS_LIST_VISITED: 'Integrations Page: Visited the list page',
+	INTEGRATIONS_ITEM_LIST_CLICKED: 'Integrations Page: Clicked an integration',
+	INTEGRATIONS_DETAIL_CONNECT:
+		'Integrations Detail Page: Clicked connect integration button',
+	INTEGRATIONS_DETAIL_TEST_CONNECTION:
+		'Integrations Detail Page: Clicked test Connection button for integration',
+	INTEGRATIONS_DETAIL_REMOVE_INTEGRATION:
+		'Integrations Detail Page: Clicked remove Integration button for integration',
+	INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION:
+		'Integrations Detail Page: Navigated to configure an integration',
+	AWS_INTEGRATION_ACCOUNT_REMOVED:
+		'AWS Integration Detail page: Clicked remove Integration button for integration',
+};
+
+export const INTEGRATION_TYPES = {
+	AWS: 'aws',
+	AZURE: 'azure',
+};
+
+export const AWS_INTEGRATION = {
+	id: INTEGRATION_TYPES.AWS,
+	title: 'Amazon Web Services',
+	description: 'One click setup for AWS monitoring with SigNoz',
+	author: {
+		name: 'SigNoz',
+		email: 'integrations@signoz.io',
+		homepage: 'https://signoz.io',
+	},
+	icon: awsDarkLogo,
+	icon_alt: 'aws-logo',
+	is_installed: false,
+	is_new: false,
+};
+
+export const AZURE_INTEGRATION = {
+	id: INTEGRATION_TYPES.AZURE,
+	title: 'Microsoft Azure',
+	description: 'One click setup for Azure monitoring with SigNoz',
+	author: {
+		name: 'SigNoz',
+		email: 'integrations@signoz.io',
+		homepage: 'https://signoz.io',
+	},
+	icon: azureOpenaiLogo,
+	icon_alt: 'azure-logo',
+	is_installed: false,
+	is_new: true,
+};
+
+export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION];
+
+export const AZURE_REGIONS: AzureRegion[] = [
+	{
+		label: 'Australia Central',
+		value: 'australiacentral',
+		geography: 'Australia',
+	},
+	{
+		label: 'Australia Central 2',
+		value: 'australiacentral2',
+		geography: 'Australia',
+	},
+	{ label: 'Australia East', value: 'australiaeast', geography: 'Australia' },
+	{
+		label: 'Australia Southeast',
+		value: 'australiasoutheast',
+		geography: 'Australia',
+	},
+	{ label: 'Austria East', value: 'austriaeast', geography: 'Austria' },
+	{ label: 'Belgium Central', value: 'belgiumcentral', geography: 'Belgium' },
+	{ label: 'Brazil South', value: 'brazilsouth', geography: 'Brazil' },
+	{ label: 'Brazil Southeast', value: 'brazilsoutheast', geography: 'Brazil' },
+	{ label: 'Canada Central', value: 'canadacentral', geography: 'Canada' },
+	{ label: 'Canada East', value: 'canadaeast', geography: 'Canada' },
+	{ label: 'Central India', value: 'centralindia', geography: 'India' },
+	{ label: 'Central US', value: 'centralus', geography: 'United States' },
+	{ label: 'Chile Central', value: 'chilecentral', geography: 'Chile' },
+	{ label: 'East Asia', value: 'eastasia', geography: 'Asia Pacific' },
+	{ label: 'East US', value: 'eastus', geography: 'United States' },
+	{ label: 'East US 2', value: 'eastus2', geography: 'United States' },
+	{ label: 'France Central', value: 'francecentral', geography: 'France' },
+	{ label: 'France South', value: 'francesouth', geography: 'France' },
+	{ label: 'Germany North', value: 'germanynorth', geography: 'Germany' },
+	{
+		label: 'Germany West Central',
+		value: 'germanywestcentral',
+		geography: 'Germany',
+	},
+	{
+		label: 'Indonesia Central',
+		value: 'indonesiacentral',
+		geography: 'Indonesia',
+	},
+	{ label: 'Israel Central', value: 'israelcentral', geography: 'Israel' },
+	{ label: 'Italy North', value: 'italynorth', geography: 'Italy' },
+	{ label: 'Japan East', value: 'japaneast', geography: 'Japan' },
+	{ label: 'Japan West', value: 'japanwest', geography: 'Japan' },
+	{ label: 'Korea Central', value: 'koreacentral', geography: 'Korea' },
+	{ label: 'Korea South', value: 'koreasouth', geography: 'Korea' },
+	{ label: 'Malaysia West', value: 'malaysiawest', geography: 'Malaysia' },
+	{ label: 'Mexico Central', value: 'mexicocentral', geography: 'Mexico' },
+	{
+		label: 'New Zealand North',
+		value: 'newzealandnorth',
+		geography: 'New Zealand',
+	},
+	{
+		label: 'North Central US',
+		value: 'northcentralus',
+		geography: 'United States',
+	},
+	{ label: 'North Europe', value: 'northeurope', geography: 'Europe' },
+	{ label: 'Norway East', value: 'norwayeast', geography: 'Norway' },
+	{ label: 'Norway West', value: 'norwaywest', geography: 'Norway' },
+	{ label: 'Poland Central', value: 'polandcentral', geography: 'Poland' },
+	{ label: 'Qatar Central', value: 'qatarcentral', geography: 'Qatar' },
+	{
+		label: 'South Africa North',
+		value: 'southafricanorth',
+		geography: 'South Africa',
+	},
+	{
+		label: 'South Africa West',
+		value: 'southafricawest',
+		geography: 'South Africa',
+	},
+	{
+		label: 'South Central US',
+		value: 'southcentralus',
+		geography: 'United States',
+	},
+	{ label: 'South India', value: 'southindia', geography: 'India' },
+	{ label: 'Southeast Asia', value: 'southeastasia', geography: 'Asia Pacific' },
+	{ label: 'Spain Central', value: 'spaincentral', geography: 'Spain' },
+	{ label: 'Sweden Central', value: 'swedencentral', geography: 'Sweden' },
+	{
+		label: 'Switzerland North',
+		value: 'switzerlandnorth',
+		geography: 'Switzerland',
+	},
+	{
+		label: 'Switzerland West',
+		value: 'switzerlandwest',
+		geography: 'Switzerland',
+	},
+	{ label: 'UAE Central', value: 'uaecentral', geography: 'UAE' },
+	{ label: 'UAE North', value: 'uaenorth', geography: 'UAE' },
+	{ label: 'UK South', value: 'uksouth', geography: 'United Kingdom' },
+	{ label: 'UK West', value: 'ukwest', geography: 'United Kingdom' },
+	{
+		label: 'West Central US',
+		value: 'westcentralus',
+		geography: 'United States',
+	},
+	{ label: 'West Europe', value: 'westeurope', geography: 'Europe' },
+	{ label: 'West India', value: 'westindia', geography: 'India' },
+	{ label: 'West US', value: 'westus', geography: 'United States' },
+	{ label: 'West US 2', value: 'westus2', geography: 'United States' },
+	{ label: 'West US 3', value: 'westus3', geography: 'United States' },
+];

frontend/src/container/Integrations/types.ts

@@ -0,0 +1,124 @@
+import {
+	AWSCloudAccountConfig,
+	AWSServiceConfig,
+} from './CloudIntegration/AmazonWebServices/types';
+
+export enum IntegrationType {
+	AWS_SERVICES = 'aws-services',
+	AZURE_SERVICES = 'azure-services',
+}
+
+interface LogField {
+	name: string;
+	path: string;
+	type: string;
+}
+
+interface Metric {
+	name: string;
+	type: string;
+	unit: string;
+}
+
+export interface AzureConfig {
+	name: string;
+	enabled: boolean;
+}
+
+export interface IConfigConnectionStatus {
+	category: string;
+	category_display_name: string;
+	last_received_ts_ms: number;
+	last_received_from: string;
+}
+
+export interface IServiceStatus {
+	logs: IConfigConnectionStatus[] | null;
+	metrics: IConfigConnectionStatus[] | null;
+}
+
+export interface AzureServicesConfig {
+	logs: AzureConfig[];
+	metrics: AzureConfig[];
+}
+
+export interface AzureServiceConfigPayload {
+	cloud_account_id: string;
+	config: AzureServicesConfig;
+}
+
+interface Dashboard {
+	id: string;
+	url: string;
+	title: string;
+	description: string;
+	image: string;
+}
+
+export interface SupportedSignals {
+	metrics: boolean;
+	logs: boolean;
+}
+
+export interface AzureService {
+	id: string;
+	title: string;
+	icon: string;
+	config: AzureServicesConfig;
+}
+
+export interface ServiceData {
+	id: string;
+	title: string;
+	icon: string;
+	overview: string;
+	supported_signals: SupportedSignals;
+	assets: {
+		dashboards: Dashboard[];
+	};
+	data_collected: {
+		logs?: LogField[];
+		metrics: Metric[];
+	};
+	config?: AWSServiceConfig | AzureServicesConfig;
+	status?: IServiceStatus;
+}
+
+export interface CloudAccount {
+	id: string;
+	cloud_account_id: string;
+	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
+	status: AccountStatus | IServiceStatus;
+}
+
+export interface AzureCloudAccountConfig {
+	deployment_region: string;
+	resource_groups: string[];
+}
+
+export interface AccountStatus {
+	integration: IntegrationStatus;
+}
+
+export interface IntegrationStatus {
+	last_heartbeat_ts_ms: number;
+}
+
+export interface AzureRegion {
+	label: string;
+	geography: string;
+	value: string;
+}
+
+export interface UpdateServiceConfigPayload {
+	cloud_account_id: string;
+	config: AzureServicesConfig;
+}
+
+export interface UpdateServiceConfigResponse {
+	status: string;
+	data: {
+		id: string;
+		config: AzureServicesConfig;
+	};
+}

frontend/src/container/Integrations/utils.ts

@@ -0,0 +1,9 @@
+import history from 'lib/history';
+
+export const handleContactSupport = (isCloudUser: boolean): void => {
+	if (isCloudUser) {
+		history.push('/support');
+	} else {
+		window.open('https://signoz.io/slack', '_blank');
+	}
+};

frontend/src/container/ListOfDashboard/DashboardList.styles.scss

@@ -7,8 +7,7 @@
 
 	// overridding the request integration style to fix the spacing for dashboard list
 	.request-entity-container {
-		margin-bottom: 16px !important;
-		margin-top: 0 !important;
+		margin: 16px 0 !important;
 	}
 
 	.integrations-content {