signoz/frontend/src/hooks/integrations/aws/useAccountSettingsModal.ts

140 lines
3.6 KiB
TypeScript
Raw Normal View History

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 21:51:49 +05:30
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 };