AWS Integration changes

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

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

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

@@ -9,19 +9,22 @@ import {
 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;
+	return response.data.data.accounts;
 };
 
 export const getAwsServices = async (
-	accountId?: string,
+	cloudAccountId?: string,
 ): Promise<Service[]> => {
-	const params = accountId ? { account_id: accountId } : undefined;
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
 	const response = await axios.get('/cloud-integrations/aws/services', {
 		params,
 	});
@@ -31,9 +34,11 @@ export const getAwsServices = async (
 
 export const getServiceDetails = async (
 	serviceId: string,
-	accountId?: string,
+	cloudAccountId?: string,
 ): Promise<ServiceData> => {
-	const params = accountId ? { account_id: accountId } : undefined;
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
 	const response = await axios.get(
 		`/cloud-integrations/aws/services/${serviceId}`,
 		{ params },
@@ -74,3 +79,10 @@ export const updateServiceConfig = async (
 	);
 	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/constants/reactQueryKeys.ts

@@ -41,5 +41,6 @@ export const REACT_QUERY_KEY = {
 	AWS_UPDATE_ACCOUNT_CONFIG: 'AWS_UPDATE_ACCOUNT_CONFIG',
 	AWS_UPDATE_SERVICE_CONFIG: 'AWS_UPDATE_SERVICE_CONFIG',
 	AWS_GENERATE_CONNECTION_URL: 'AWS_GENERATE_CONNECTION_URL',
+	AWS_GET_CONNECTION_PARAMS: 'AWS_GET_CONNECTION_PARAMS',
 	GET_ATTRIBUTE_VALUES: 'GET_ATTRIBUTE_VALUES',
 };

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

@@ -24,7 +24,9 @@ function Header(): JSX.Element {
 						},
 						{
 							title: (
-								<div className="cloud-header__breadcrumb-title">AWS web services</div>
+								<div className="cloud-header__breadcrumb-title">
+									Amazon Web Services
+								</div>
 							),
 						},
 					]}

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

@@ -21,7 +21,7 @@ function HeroSection(): JSX.Element {
 				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
 			</div>
 			<div className="hero-section__details">
-				<div className="title">AWS Web Services</div>
+				<div className="title">Amazon Web Services</div>
 				<div className="description">
 					One-click setup for AWS monitoring with SigNoz
 				</div>

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

@@ -1,7 +1,7 @@
 import './AccountActions.style.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select } from 'antd';
+import { Button, Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import { useAwsAccounts } from 'hooks/integrations/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -53,15 +53,96 @@ const getAccountById = (
 ): CloudAccount | null =>
 	accounts.find((account) => account.cloud_account_id === accountId) || null;
 
+function AccountActionsRenderer({
+	accounts,
+	isLoading,
+	activeAccount,
+	selectOptions,
+	onAccountChange,
+	onIntegrationModalOpen,
+	onAccountSettingsModalOpen,
+}: {
+	accounts: CloudAccount[] | undefined;
+	isLoading: boolean;
+	activeAccount: CloudAccount | null;
+	selectOptions: SelectProps['options'];
+	onAccountChange: (value: string) => void;
+	onIntegrationModalOpen: () => void;
+	onAccountSettingsModalOpen: () => void;
+}): JSX.Element {
+	if (isLoading) {
+		return (
+			<div className="hero-section__actions-with-account">
+				<Skeleton.Input
+					active
+					size="large"
+					block
+					style={{ width: '300px', marginBottom: '16px' }}
+				/>
+				<div className="hero-section__action-buttons">
+					<Skeleton.Button
+						active
+						size="large"
+						style={{ width: '180px', marginRight: '8px' }}
+					/>
+					<Skeleton.Button active size="large" style={{ width: '140px' }} />
+				</div>
+			</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__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"
+						onClick={onAccountSettingsModalOpen}
+					>
+						Account Settings
+					</Button>
+				</div>
+			</div>
+		);
+	}
+	return (
+		<Button
+			className="hero-section__action-button primary"
+			onClick={onIntegrationModalOpen}
+		>
+			Integrate Now
+		</Button>
+	);
+}
+
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const { data: accounts } = useAwsAccounts();
+	const { data: accounts, isLoading } = useAwsAccounts();
 
 	const initialAccount = useMemo(
 		() =>
 			accounts?.length
-				? getAccountById(accounts, urlQuery.get('accountId') || '') || accounts[0]
+				? getAccountById(accounts, urlQuery.get('cloudAccountId') || '') ||
+				  accounts[0]
 				: null,
 		[accounts, urlQuery],
 	);
@@ -74,7 +155,7 @@ function AccountActions(): JSX.Element {
 	useEffect(() => {
 		if (initialAccount !== null) {
 			setActiveAccount(initialAccount);
-			urlQuery.set('accountId', initialAccount.cloud_account_id);
+			urlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
 			navigate({ search: urlQuery.toString() });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -98,60 +179,35 @@ function AccountActions(): JSX.Element {
 
 	return (
 		<div className="hero-section__actions">
-			{accounts?.length ? (
-				<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={(value): void => {
-							setActiveAccount(getAccountById(accounts, value));
-							urlQuery.set('accountId', value);
-							navigate({ search: urlQuery.toString() });
-						}}
-					/>
-					<div className="hero-section__action-buttons">
-						<Button
-							type="primary"
-							className="hero-section__action-button primary"
-							onClick={(): void => setIsIntegrationModalOpen(true)}
-						>
-							Add New AWS Account
-						</Button>
-						<Button
-							type="default"
-							className="hero-section__action-button secondary"
-							onClick={(): void => setIsAccountSettingsModalOpen(true)}
-						>
-							Account Settings
-						</Button>
-					</div>
-				</div>
-			) : (
-				<Button
-					className="hero-section__action-button primary"
-					onClick={(): void => setIsIntegrationModalOpen(true)}
-				>
-					Integrate Now
-				</Button>
-			)}
-
-			<CloudAccountSetupModal
-				isOpen={isIntegrationModalOpen}
-				onClose={(): void => setIsIntegrationModalOpen(false)}
+			<AccountActionsRenderer
+				accounts={accounts}
+				isLoading={isLoading}
+				activeAccount={activeAccount}
+				selectOptions={selectOptions}
+				onAccountChange={(value): void => {
+					if (accounts) {
+						setActiveAccount(getAccountById(accounts, value));
+						urlQuery.set('cloudAccountId', value);
+						navigate({ search: urlQuery.toString() });
+					}
+				}}
+				onIntegrationModalOpen={(): void => setIsIntegrationModalOpen(true)}
+				onAccountSettingsModalOpen={(): void => setIsAccountSettingsModalOpen(true)}
 			/>
 
-			<AccountSettingsModal
-				isOpen={isAccountSettingsModalOpen}
-				onClose={(): void => setIsAccountSettingsModalOpen(false)}
-				account={activeAccount as CloudAccount}
-				setActiveAccount={setActiveAccount}
-			/>
+			{isIntegrationModalOpen && (
+				<CloudAccountSetupModal
+					onClose={(): void => setIsIntegrationModalOpen(false)}
+				/>
+			)}
+
+			{isAccountSettingsModalOpen && (
+				<AccountSettingsModal
+					onClose={(): void => setIsAccountSettingsModalOpen(false)}
+					account={activeAccount as CloudAccount}
+					setActiveAccount={setActiveAccount}
+				/>
+			)}
 		</div>
 	);
 }

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

@@ -2,27 +2,27 @@ import './AccountSettingsModal.style.scss';
 
 import { Form, Select, Switch } from 'antd';
 import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	getRegionPreviewText,
 	useAccountSettingsModal,
 } from 'hooks/integrations/aws/useAccountSettingsModal';
-import IntergrationsUninstallBar from 'pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar';
-import { ConnectionStates } from 'pages/Integrations/IntegrationDetailPage/TestConnection';
-import { AWS_INTEGRATION } from 'pages/Integrations/IntegrationsList';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
 import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
 
 import { CloudAccount } from '../../ServicesSection/types';
 import { RegionSelector } from './RegionSelector';
+import RemoveIntegrationAccount from './RemoveIntegrationAccount';
 
 interface AccountSettingsModalProps {
-	isOpen: boolean;
 	onClose: () => void;
 	account: CloudAccount;
 	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
 }
 
 function AccountSettingsModal({
-	isOpen,
 	onClose,
 	account,
 	setActiveAccount,
@@ -42,6 +42,16 @@ function AccountSettingsModal({
 		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() });
+	};
+
 	const renderRegionSelector = useCallback(() => {
 		if (isRegionSelectOpen) {
 			return (
@@ -120,7 +130,7 @@ function AccountSettingsModal({
 
 	return (
 		<SignozModal
-			open={isOpen}
+			open
 			title={modalTitle}
 			onCancel={handleClose}
 			onOk={handleSubmit}
@@ -164,12 +174,9 @@ function AccountSettingsModal({
 					</Form.Item>
 
 					<div className="integration-detail-content">
-						<IntergrationsUninstallBar
-							integrationTitle={AWS_INTEGRATION.title}
-							integrationId={AWS_INTEGRATION.id}
-							onUnInstallSuccess={handleClose}
-							removeIntegrationTitle="Remove"
-							connectionStatus={ConnectionStates.Connected}
+						<RemoveIntegrationAccount
+							accountId={account?.id}
+							onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
 						/>
 					</div>
 				</div>