AWS Integration: Account settings modal (#6808)

* feat: implement basic cloud account management UI in HeroSection * feat: start working on integrate now modal UI * feat: get accounts from json-server API, and redirect Add new account to the integrations modal * feat: integrate now modal UI * feat: integrate now modal states and json server API integration * feat: account settings * feat: service status UI * refactor: make account settings modal more readable and overall improvements * Get data from json server api data in service sections (#6809) * feat: implement basic cloud account management UI in HeroSection * feat: start working on integrate now modal UI * feat: get accounts from json-server API, and redirect Add new account to the integrations modal * refactor: make the cloud account setup modal readable / DRYer * feat: integrate now modal states and json server API integration * refactor: make account settings modal more readable and overall improvements * feat: integrate now modal states and json server API integration * feat: display error state if last_heartbeat_ts_ms is null even after 5 minutes * feat: get the services list and details from json server API response * feat: update account actions to set accountId in URL query on initial account load * Configure service modal (#6814) * feat: implement basic cloud account management UI in HeroSection * feat: start working on integrate now modal UI * feat: get accounts from json-server API, and redirect Add new account to the integrations modal * refactor: make the cloud account setup modal readable / DRYer * feat: integrate now modal states and json server API integration * feat: get accounts from json-server API, and redirect Add new account to the integrations modal * feat: integrate now modal states and json server API integration * feat: get accounts from json-server API, and redirect Add new account to the integrations modal * feat: display error state if last_heartbeat_ts_ms is null even after 5 minutes * feat: account settings * feat: service status UI * feat: get the services list and details from json server API response * feat: update account actions to set accountId in URL query on initial account load * feat: configure service modal UI * feat: configure service modal functionality and API changes * feat: replace loading indicators with Spinner component in ServiceDetails and ServicesList * fix: make the configure service modal work * Light mode support and overall improvements to AWS integration page (#6817) * refactor: make the cloud account setup modal readable / DRYer * feat: integrate now modal states and json server API integration * refactor: make account settings modal more readable and overall improvements * fix: integrate now modal button improvements * feat: aws integrations light mode * refactor: overall improvements * refactor: define react query keys in constant * feat: services filter * feat: render service overview as markdown * feat: integrate AWS integration page API (#6851) * feat: replace json-server APIs with actual APIs * fix: add null checks and fix the issues
SigNoz · Jan 28, 2025 · 0e98eb2 · 0e98eb2
1 parent 3bae1b6
commit 0e98eb2
Show file tree

Hide file tree

Showing 44 changed files with 2,133 additions and 474 deletions.
diff --git a/frontend/public/Logos/aws-light.svg b/frontend/public/Logos/aws-light.svg
diff --git a/frontend/src/api/integrations/aws/index.ts b/frontend/src/api/integrations/aws/index.ts
@@ -3,13 +3,17 @@ import {
 	CloudAccount,
 	Service,
 	ServiceData,
+	UpdateServiceConfigPayload,
+	UpdateServiceConfigResponse,
 } from 'container/CloudIntegrationPage/ServicesSection/types';
-import { ConnectionUrlResponse } from 'types/api/integrations/aws';
+import {
+	AccountConfigPayload,
+	AccountConfigResponse,
+	ConnectionUrlResponse,
+} from 'types/api/integrations/aws';
 
 export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
-	const response = await axios.get(
-		'http://localhost:3000/api/v1/cloud-integrations/aws/accounts',
-	);
+	const response = await axios.get('/cloud-integrations/aws/accounts');
 
 	return response.data.data;
 };
@@ -18,12 +22,10 @@ export const getAwsServices = async (
 	accountId?: string,
 ): Promise<Service[]> => {
 	const params = accountId ? { account_id: accountId } : undefined;
-	const response = await axios.get(
-		'http://localhost:3000/api/v1/cloud-integrations/aws/services',
-		{
-			params,
-		},
-	);
+	const response = await axios.get('/cloud-integrations/aws/services', {
+		params,
+	});
+
 	return response.data.data.services;
 };
 
@@ -33,7 +35,7 @@ export const getServiceDetails = async (
 ): Promise<ServiceData> => {
 	const params = accountId ? { account_id: accountId } : undefined;
 	const response = await axios.get(
-		`http://localhost:3000/api/v1/cloud-integrations/aws/services/${serviceId}`,
+		`/cloud-integrations/aws/services/${serviceId}`,
 		{ params },
 	);
 	return response.data.data;
@@ -45,8 +47,31 @@ export const generateConnectionUrl = async (params: {
 	account_id?: string;
 }): Promise<ConnectionUrlResponse> => {
 	const response = await axios.post(
-		'http://localhost:3000/api/v1/cloud-integrations/aws/accounts/generate-connection-url',
+		'/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,
+	);
+	console.log({ serviceId });
+	return response.data;
+};
diff --git a/frontend/src/components/SignozModal/SignozModal.style.scss b/frontend/src/components/SignozModal/SignozModal.style.scss
@@ -68,3 +68,50 @@
 		}
 	}
 }
+
+.lightMode {
+	.signoz-modal {
+		.ant-modal-content {
+			background: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		.ant-modal-header {
+			background: var(--bg-vanilla-100);
+			border-bottom-color: var(--bg-vanilla-300);
+		}
+
+		.ant-modal-title {
+			color: var(--bg-ink-500);
+		}
+
+		.ant-typography {
+			color: var(--bg-ink-500);
+		}
+
+		.ant-select {
+			&-selector {
+				background: var(--bg-vanilla-100) !important;
+				border-color: var(--bg-vanilla-300) !important;
+			}
+		}
+
+		.ant-select-dropdown {
+			background: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		.ant-select-item {
+			color: var(--bg-ink-400);
+
+			&-option-selected {
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-500);
+			}
+
+			&-option-active {
+				background: var(--bg-vanilla-200);
+			}
+		}
+	}
+}
diff --git a/frontend/src/components/SignozModal/SignozModal.tsx b/frontend/src/components/SignozModal/SignozModal.tsx
@@ -4,15 +4,16 @@ import { Modal, ModalProps } from 'antd';
 
 function SignozModal({
 	children,
-	className = '',
+
+	rootClassName = '',
 	...rest
 }: ModalProps): JSX.Element {
 	return (
 		<Modal
 			centered
 			width={672}
-			rootClassName={`signoz-modal ${className}`}
 			cancelText="Close"
+			rootClassName={`signoz-modal ${rootClassName}`}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...rest}
 		>

diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
@@ -21,4 +21,13 @@ export const REACT_QUERY_KEY = {
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
+
+	// AWS Integration Query Keys
+	AWS_ACCOUNTS: 'AWS_ACCOUNTS',
+	AWS_SERVICES: 'AWS_SERVICES',
+	AWS_SERVICE_DETAILS: 'AWS_SERVICE_DETAILS',
+	AWS_ACCOUNT_STATUS: 'AWS_ACCOUNT_STATUS',
+	AWS_UPDATE_ACCOUNT_CONFIG: 'AWS_UPDATE_ACCOUNT_CONFIG',
+	AWS_UPDATE_SERVICE_CONFIG: 'AWS_UPDATE_SERVICE_CONFIG',
+	AWS_GENERATE_CONNECTION_URL: 'AWS_GENERATE_CONNECTION_URL',
 };
diff --git a/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx b/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx
@@ -1,5 +1,3 @@
-import './CloudIntegrationPage.style.scss';
-
 import Header from './Header/Header';
 import HeroSection from './HeroSection/HeroSection';
 import ServicesTabs from './ServicesSection/ServicesTabs';

diff --git a/...ationPage/CloudIntegrationPage.style.scss → ...IntegrationPage/Header/Header.styles.scss b/...ationPage/CloudIntegrationPage.style.scss → ...IntegrationPage/Header/Header.styles.scss
@@ -4,6 +4,7 @@
 	align-items: center;
 	padding: 8px 18px;
 	border-bottom: 1px solid var(--bg-slate-400);
+
 	&__navigation {
 		display: flex;
 		align-items: center;
@@ -41,3 +42,24 @@
 		cursor: pointer;
 	}
 }
+
+.lightMode {
+	.cloud-header {
+		border-bottom: 1px solid var(--bg-slate-300);
+
+		&__breadcrumb-title {
+			color: var(--bg-ink-400);
+		}
+
+		&__help {
+			border-color: var(--bg-slate-300);
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-400);
+
+			&:hover {
+				border-color: var(--bg-slate-400);
+				color: var(--bg-ink-500);
+			}
+		}
+	}
+}
diff --git a/frontend/src/container/CloudIntegrationPage/Header/Header.tsx b/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
@@ -1,3 +1,5 @@
+import './Header.styles.scss';
+
 import Breadcrumb from 'antd/es/breadcrumb';
 import ROUTES from 'constants/routes';
 import { Blocks, LifeBuoy } from 'lucide-react';

diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss
@@ -46,3 +46,24 @@
 		}
 	}
 }
+
+.lightMode {
+	.hero-section {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		&__icon {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&__details {
+			.title {
+				color: var(--bg-ink-500);
+			}
+
+			.description {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
@@ -1,12 +1,21 @@
 import './HeroSection.style.scss';
 
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
 import AccountActions from './components/AccountActions';
 
 function HeroSection(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
 	return (
 		<div
 			className="hero-section"
-			style={{ backgroundImage: `url('/Images/integrations-hero-bg.png')` }}
+			style={
+				isDarkMode
+					? {
+							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
+					  }
+					: {}
+			}
 		>
 			<div className="hero-section__icon">
 				<img src="/Logos/aws-dark.svg" alt="aws-logo" />

diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss
@@ -77,3 +77,51 @@
 		}
 	}
 }
+.lightMode {
+	.hero-section__action-button {
+		&.primary {
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+		}
+
+		&.secondary {
+			border-color: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+			background: var(--bg-vanilla-100);
+
+			&:hover {
+				border-color: var(--bg-vanilla-400);
+				color: var(--bg-ink-500);
+			}
+		}
+	}
+
+	.cloud-account-selector {
+		background: var(--bg-vanilla-100);
+		.ant-select-selector {
+			background: var(--bg-vanilla-100) !important;
+			border-color: var(--bg-vanilla-400) !important;
+		}
+		.ant-select-item-option-active {
+			background: var(--bg-vanilla-400) !important;
+		}
+
+		.ant-select-selection-item {
+			color: var(--bg-ink-400);
+		}
+
+		&:hover {
+			.ant-select-selector {
+				border-color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+
+	.account-option-item {
+		color: var(--bg-ink-400);
+
+		&__selected {
+			background: var(--bg-robin-500);
+		}
+	}
+}