import { Box as MUIBox, FormControl, FormControlLabel, FormGroup, FormLabel as MUIFormLabel, Grid, Radio as MUIRadio, radioClasses as muiRadioClasses, RadioGroup, styled, SxProps, Theme, } from '@mui/material'; import Head from 'next/head'; import { FC, useMemo, useRef, useState } from 'react'; import { GREY } from '../../lib/consts/DEFAULT_THEME'; import FlexBox from '../../components/FlexBox'; import Header from '../../components/Header'; import { Panel, PanelHeader } from '../../components/Panels'; import { BodyText, HeaderText } from '../../components/Text'; import OutlinedInputWithLabel from '../../components/OutlinedInputWithLabel'; import ContainedButton from '../../components/ContainedButton'; import InputWithRef, { InputForwardedRefContent, } from '../../components/InputWithRef'; import Spinner from '../../components/Spinner'; import INPUT_TYPES from '../../lib/consts/INPUT_TYPES'; import mainAxiosInstance from '../../lib/singletons/mainAxiosInstance'; const INPUT_PARENT_SX: SxProps = { '& > *': { flexBasis: { xs: '50%' } }, }; const Radio = styled(MUIRadio)({ [`&.${muiRadioClasses.root}`]: { color: GREY, }, }); const PrepareHost: FC = () => { const inputEnterpriseKeyRef = useRef>({}); const inputHostIPAddressRef = useRef>({}); const inputHostNameRef = useRef>({}); const inputHostPasswordRef = useRef>({}); const inputRedhatPassword = useRef>({}); const inputRedhatUser = useRef>({}); const [isShowAccessSection, setIsShowAccessSection] = useState(false); const [isShowOptionalSection, setIsShowOptionalSection] = useState(false); const [isShowRedhatSection, setIsShowRedhatSection] = useState(false); const [isTestAccessInProgress, setIsTestAccessInProgress] = useState(false); const testAccessElement = useMemo( () => isShowOptionalSection ? ( <> ) : ( { setIsTestAccessInProgress(true); mainAxiosInstance .put< { status: number }, { hostName: string; hostOS: string; hostUUID: string; isConnected: boolean; isInetConnected: boolean; isOSRegistered: boolean; }, { ipAddress?: string; password?: string } >('/command/inquire', { ipAddress: inputHostIPAddressRef.current.getValue?.call(null), password: inputHostPasswordRef.current.getValue?.call(null), }) .then( ({ hostName, hostOS, isInetConnected, isOSRegistered }) => { inputHostNameRef.current.setValue?.call(null, hostName); if ( isInetConnected && /rhel/i.test(hostOS) && !isOSRegistered ) { setIsShowRedhatSection(true); } setIsShowOptionalSection(true); }, ) .catch((error) => { const { request, response, message, config } = error; }) .finally(() => { setIsTestAccessInProgress(false); }); }} > Test access ), [isShowOptionalSection], ); return ( <> Prepare Host
Prepare a host to include in Anvil! {/* Build radio group with label */} Host type { setIsShowAccessSection(true); }} row > } value="node" label={Node} /> } value="drhost" label={Disaster Recovery (DR) host} /> {isShowAccessSection && ( } ref={inputHostIPAddressRef} /> } ref={inputHostPasswordRef} /> {isTestAccessInProgress ? : testAccessElement} )} {isShowOptionalSection && ( } ref={inputHostNameRef} /> } ref={inputEnterpriseKeyRef} /> {isShowRedhatSection && ( } ref={inputRedhatUser} /> } ref={inputRedhatPassword} /> )} Prepare host )} ); }; export default PrepareHost;