signoz/frontend/src/hooks/integrations/aws/useAccountSettingsModal.ts
Yunus M e542e96031
feat: aws integration (#6954)
* feat: aws Integration skeleton UI (#6758)

* feat: add AWS integration in the integrations list and redirect to the new Cloud Integration page

* feat: cloud integration details page header (i.e. breadcrumb and get help button) UI

* feat: hero section UI

* refactor: extract Header and HeroSection components from CloudIntegrationPage

* feat: services tab bar and sidebar UI

* feat: cloud integration details services UI

* refactor: group and extract cloud integration components to files

* fix: set default active service to the first service in the list if no service is specified

* feat: add NEW flag for AWS integration in the integrations list page

* chore: overall improvements

* chore: move cloud integration pages to /container

* fix: hero section background

* feat: aws Integration: Account setup basic UI and functionality (#6806)

* feat: implement basic cloud account management UI in HeroSection

* feat: aws Integration: Integrate now modal (#6807)

* feat: implement basic cloud account management UI in HeroSection

* feat: start working on integrate now modal UI

* feat: integrate now modal UI

* 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

* chore: update import path for regions data in useRegionSelection hook

* chore: move hero section components inside the HeroSection/components

* feat: create a reusable modal component

* refactor: make the cloud account setup modal readable / DRYer

* feat: 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

* feat: 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

* feat: 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

* feat: 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

* chore: remove the console.log

* feat: temporarily hide AWS Integration from integrations list

* chore: add optimized png

* refactor: extract service filter types into an enum

* chore: remove console.log

* chore: remove duplicate files

* refactor: move regions to utils

* fix: get account id from url param

* chore: address PR review comments

* refactor: use the IntegrateNowFormSections inside RegionForm

* chore: move integrations select inline style to a common class

---------

Co-authored-by: Shaheer Kochai <ashaheerki@gmail.com>
2025-01-30 20:51:49 +04:30

140 lines
3.6 KiB
TypeScript

import { Form } from 'antd';
import { FormInstance } from 'antd/lib';
import { CloudAccount } from 'container/CloudIntegrationPage/ServicesSection/types';
import { useUpdateAccountConfig } from 'hooks/integrations/aws/useUpdateAccountConfig';
import { isEqual } from 'lodash-es';
import {
Dispatch,
SetStateAction,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { AccountConfigPayload } from 'types/api/integrations/aws';
import { regions } from 'utils/regions';
interface UseAccountSettingsModalProps {
onClose: () => void;
account: CloudAccount;
setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
}
interface UseAccountSettingsModal {
form: FormInstance;
isLoading: boolean;
selectedRegions: string[];
includeAllRegions: boolean;
isRegionSelectOpen: boolean;
isSaveDisabled: boolean;
setSelectedRegions: Dispatch<SetStateAction<string[]>>;
setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
setIsRegionSelectOpen: Dispatch<SetStateAction<boolean>>;
handleIncludeAllRegionsChange: (checked: boolean) => void;
handleSubmit: () => Promise<void>;
handleClose: () => void;
}
const allRegions = (): string[] =>
regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
const getRegionPreviewText = (regions: string[] | undefined): string[] => {
if (!regions) return [];
if (regions.includes('all')) {
return allRegions();
}
return regions;
};
export function useAccountSettingsModal({
onClose,
account,
setActiveAccount,
}: UseAccountSettingsModalProps): UseAccountSettingsModal {
const [form] = Form.useForm();
const { mutate: updateConfig, isLoading } = useUpdateAccountConfig();
const accountRegions = useMemo(() => account?.config?.regions || [], [
account?.config?.regions,
]);
const [isInitialRegionsSet, setIsInitialRegionsSet] = useState(false);
const [selectedRegions, setSelectedRegions] = useState<string[]>([]);
const [includeAllRegions, setIncludeAllRegions] = useState(false);
const [isRegionSelectOpen, setIsRegionSelectOpen] = useState(false);
// Initialize regions from account when modal opens
useEffect(() => {
if (accountRegions.length > 0 && !isInitialRegionsSet) {
setSelectedRegions(accountRegions);
setIsInitialRegionsSet(true);
setIncludeAllRegions(accountRegions.includes('all'));
}
}, [accountRegions, isInitialRegionsSet]);
const handleSubmit = useCallback(async (): Promise<void> => {
try {
await form.validateFields();
const payload: AccountConfigPayload = {
config: {
regions: selectedRegions,
},
};
updateConfig(
{ accountId: account?.id, payload },
{
onSuccess: (response) => {
setActiveAccount(response.data);
onClose();
},
},
);
} catch (error) {
console.error('Form submission failed:', error);
}
}, [
form,
selectedRegions,
updateConfig,
account?.id,
setActiveAccount,
onClose,
]);
const isSaveDisabled = useMemo(
() => isEqual(selectedRegions.sort(), accountRegions.sort()),
[selectedRegions, accountRegions],
);
const handleIncludeAllRegionsChange = useCallback((checked: boolean): void => {
setIncludeAllRegions(checked);
if (checked) {
setSelectedRegions(['all']);
} else {
setSelectedRegions([]);
}
}, []);
const handleClose = useCallback(() => {
setIsRegionSelectOpen(false);
onClose();
}, [onClose]);
return {
form,
isLoading,
selectedRegions,
includeAllRegions,
isRegionSelectOpen,
isSaveDisabled,
setSelectedRegions,
setIncludeAllRegions,
setIsRegionSelectOpen,
handleIncludeAllRegionsChange,
handleSubmit,
handleClose,
};
}
export { getRegionPreviewText };