feat: implement basic cloud account management UI in HeroSection

SigNoz · Jan 14, 2025 · 6c3b326 · 6c3b326
1 parent 7305c2d
commit 6c3b326
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 27 deletions.
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/AccountActions.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/AccountActions.style.scss
@@ -0,0 +1,79 @@
+.hero-section__actions {
+	margin-top: 12px;
+
+	&-with-account {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+}
+.hero-section__action-buttons {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.hero-section__action-button {
+	font-family: 'Inter';
+	border-radius: 2px;
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 16px;
+	padding: 8px 17px;
+
+	&.primary {
+		background: var(--bg-robin-500);
+		border: none;
+		color: var(--bg-vanilla-100);
+	}
+
+	&.secondary {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--bg-ink-300);
+		color: var(--bg-vanilla-100);
+		border-radius: 2px;
+		background: var(--bg-slate-400);
+		box-shadow: none;
+	}
+}
+
+.cloud-account-selector {
+	border-radius: 2px;
+	border: 1px solid var(--bg-ink-300);
+	background: linear-gradient(
+		139deg,
+		rgba(18, 19, 23, 0.8) 0%,
+		rgba(18, 19, 23, 0.9) 98.68%
+	);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	.ant-select-selector {
+		border-color: var(--bg-slate-400) !important;
+		background: var(--bg-ink-300) !important;
+		padding: 6px 8px !important;
+	}
+	.ant-select-selection-item {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+	}
+
+	.account-option-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		&__selected {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 14px;
+			width: 14px;
+			background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
+			border-radius: 2px;
+		}
+	}
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/AccountActions.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/AccountActions.tsx
@@ -0,0 +1,99 @@
+import './AccountActions.style.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select } from 'antd';
+import { SelectProps } from 'antd/lib';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Check, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+
+import { CloudAccount } from '../ServicesSection/types';
+
+interface AccountActionsProps {
+	accounts: CloudAccount[];
+}
+
+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 | null,
+): JSX.Element {
+	return (
+		<AccountOptionItem
+			label={option.label}
+			isSelected={option.value === activeAccountId}
+		/>
+	);
+}
+
+function AccountActions({ accounts }: AccountActionsProps): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const navigate = useNavigate();
+	const [activeAccountId, setActiveAccountId] = useState<string | null>(
+		urlQuery.get('accountId') ?? accounts[0]?.cloud_account_id ?? null,
+	);
+
+	const selectOptions: SelectProps['options'] = accounts.map((account) => ({
+		value: account.cloud_account_id,
+		label: account.cloud_account_id,
+	}));
+
+	return (
+		<div className="hero-section__actions">
+			{accounts.length ? (
+				<div className="hero-section__actions-with-account">
+					<Select
+						value={`Account: ${activeAccountId}`}
+						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, activeAccountId)
+						}
+						onChange={(value): void => {
+							setActiveAccountId(value);
+							urlQuery.set('accountId', value);
+							navigate({ search: urlQuery.toString() });
+						}}
+					/>
+					<div className="hero-section__action-buttons">
+						<Button type="primary" className="hero-section__action-button primary">
+							Add New AWS Account
+						</Button>
+						<Button type="default" className="hero-section__action-button secondary">
+							Account Settings
+						</Button>
+					</div>
+				</div>
+			) : (
+				<Button type="primary" className="hero-section__action-button primary">
+					Integrate Now
+				</Button>
+			)}
+		</div>
+	);
+}
+
+export default AccountActions;
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss
@@ -34,32 +34,15 @@
 			color: var(--bg-vanilla-100);
 			font-size: 24px;
 			font-weight: 500;
-			line-height: 20px; /* 83.333% */
+			line-height: 20px;
 			letter-spacing: -0.12px;
 		}
 
 		.description {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;
-			line-height: 18px; /* 150% */
-		}
-
-		.hero-section__buttons {
-			margin-top: 12px;
-		}
-
-		.hero-section__button {
-			font-family: 'Inter';
-			background: var(--bg-robin-500);
-			border: none;
-			padding: 8px 17px;
-			color: var(--bg-vanilla-100);
-			border-radius: 2px;
-			cursor: pointer;
-			font-size: 12px;
-			font-weight: 500;
-			line-height: 16px;
+			line-height: 18px;
 		}
 	}
 }
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
@@ -1,5 +1,8 @@
 import './HeroSection.style.scss';
 
+import { cloudAccountsData } from '../ServicesSection/data';
+import AccountActions from './AccountActions';
+
 function HeroSection(): JSX.Element {
 	return (
 		<div
@@ -22,11 +25,7 @@ function HeroSection(): JSX.Element {
 				<div className="description">
 					One-click setup for AWS monitoring with SigNoz
 				</div>
-				<div className="hero-section__buttons">
-					<button className="hero-section__button" type="button">
-						Integrate Now
-					</button>
-				</div>
+				<AccountActions accounts={cloudAccountsData.accounts} />
 			</div>
 		</div>
 	);

diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/data.ts b/frontend/src/container/CloudIntegrationPage/ServicesSection/data.ts
@@ -1,4 +1,4 @@
-import { Service, ServiceData } from './types';
+import { CloudAccountsData, Service, ServiceData } from './types';
 
 const services: Service[] = [
 	{
@@ -135,4 +135,45 @@ const serviceDetails: ServiceData[] = [
 	},
 ];
 
-export { serviceDetails, services };
+const cloudAccountsData: CloudAccountsData = {
+	accounts: [
+		{
+			id: '3e585f2d-fd1e-43bf-8a3b-ee9d449cc626',
+			cloud_account_id: '443370682259',
+			config: {
+				regions: ['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2'],
+			},
+			status: {
+				integration: {
+					last_heartbeat_ts_ms: 1709825467000,
+				},
+			},
+		},
+		{
+			id: '7a9b2c3d-4e5f-6g7h-8i9j-0k1l2m3n4o5p',
+			cloud_account_id: '123456789012',
+			config: {
+				regions: ['all'],
+			},
+			status: {
+				integration: {
+					last_heartbeat_ts_ms: 1709825467000,
+				},
+			},
+		},
+		{
+			id: '9p8o7n6m-5l4k-3j2i-1h0g-f4e3d2c1b0a',
+			cloud_account_id: '098765432109',
+			config: {
+				regions: ['eu-west-1', 'eu-central-1', 'ap-southeast-1'],
+			},
+			status: {
+				integration: {
+					last_heartbeat_ts_ms: 1709825467000,
+				},
+			},
+		},
+	],
+};
+
+export { cloudAccountsData, serviceDetails, services };
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/types.ts b/frontend/src/container/CloudIntegrationPage/ServicesSection/types.ts
@@ -59,4 +59,27 @@ interface ServiceData {
 	status?: ServiceStatus; // Optional - included only with account_id
 }
 
-export type { Service, ServiceData };
+interface CloudAccountConfig {
+	regions: string[];
+}
+
+interface IntegrationStatus {
+	last_heartbeat_ts_ms: number;
+}
+
+interface AccountStatus {
+	integration: IntegrationStatus;
+}
+
+interface CloudAccount {
+	id: string;
+	cloud_account_id: string;
+	config: CloudAccountConfig;
+	status: AccountStatus;
+}
+
+interface CloudAccountsData {
+	accounts: CloudAccount[];
+}
+
+export type { CloudAccount, CloudAccountsData, Service, ServiceData };