Tsu-ba-me
11 months ago
parent
87f69dd845
commit
1fb67c974a
1 changed files with 0 additions and 660 deletions
@ -1,660 +0,0 @@ |
||||
import { |
||||
Visibility as MUIVisibilityIcon, |
||||
VisibilityOff as MUIVisibilityOffIcon, |
||||
} from '@mui/icons-material'; |
||||
import { Box as MUIBox, IconButton as MUIIconButton } from '@mui/material'; |
||||
import { FC, useCallback, useMemo, useRef, useState } from 'react'; |
||||
|
||||
import { GREY } from '../lib/consts/DEFAULT_THEME'; |
||||
import INPUT_TYPES from '../lib/consts/INPUT_TYPES'; |
||||
|
||||
import api from '../lib/api'; |
||||
import handleAPIError from '../lib/handleAPIError'; |
||||
import { |
||||
buildDomainTestBatch, |
||||
buildIPAddressTestBatch, |
||||
buildPeacefulStringTestBatch, |
||||
buildUUIDTestBatch, |
||||
createTestInputFunction, |
||||
} from '../lib/test_input'; |
||||
|
||||
import ConfirmDialog from './ConfirmDialog'; |
||||
import ContainedButton from './ContainedButton'; |
||||
import FlexBox from './FlexBox'; |
||||
import GateForm from './GateForm'; |
||||
import Grid from './Grid'; |
||||
import InputWithRef, { InputForwardedRefContent } from './InputWithRef'; |
||||
import { Message } from './MessageBox'; |
||||
import MessageGroup, { MessageGroupForwardedRefContent } from './MessageGroup'; |
||||
import OutlinedInputWithLabel from './OutlinedInputWithLabel'; |
||||
import { Panel, PanelHeader } from './Panels'; |
||||
import RadioGroupWithLabel from './RadioGroupWithLabel'; |
||||
import Spinner from './Spinner'; |
||||
import { BodyText, HeaderText, MonoText } from './Text'; |
||||
|
||||
const ENTERPRISE_KEY_LABEL = 'Alteeve enterprise key'; |
||||
const HOST_IP_LABEL = 'Host IP address'; |
||||
const HOST_NAME_LABEL = 'Host name'; |
||||
const REDHAT_PASSWORD_LABEL = 'RedHat password'; |
||||
const REDHAT_USER_LABEL = 'RedHat user'; |
||||
const SUCCESS_MESSAGE_TIMEOUT = 5000; |
||||
|
||||
const IT_IDS = { |
||||
enterpriseKey: 'enterpriseKey', |
||||
hostName: 'hostName', |
||||
redhatPassword: 'redhatPassword', |
||||
redhatUser: 'redhatUser', |
||||
}; |
||||
|
||||
const GRID_COLUMNS: Exclude<GridProps['columns'], undefined> = { |
||||
xs: 1, |
||||
sm: 2, |
||||
}; |
||||
const GRID_SPACING: Exclude<GridProps['spacing'], undefined> = '1em'; |
||||
|
||||
const PrepareHostForm: FC = () => { |
||||
const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({}); |
||||
const inputEnterpriseKeyRef = useRef<InputForwardedRefContent<'string'>>({}); |
||||
const inputHostNameRef = useRef<InputForwardedRefContent<'string'>>({}); |
||||
const inputRedhatPassword = useRef<InputForwardedRefContent<'string'>>({}); |
||||
const inputRedhatUser = useRef<InputForwardedRefContent<'string'>>({}); |
||||
const messageGroupRef = useRef<MessageGroupForwardedRefContent>({}); |
||||
|
||||
const [confirmValues, setConfirmValues] = useState< |
||||
| { |
||||
enterpriseKey: string; |
||||
hostName: string; |
||||
redhatPassword: string; |
||||
redhatPasswordHidden: string; |
||||
redhatUser: string; |
||||
} |
||||
| undefined |
||||
>(); |
||||
const [connectedHostIPAddress, setConnectedHostIPAddress] = useState< |
||||
string | undefined |
||||
>(); |
||||
const [connectedHostPassword, setConnectedHostPassword] = useState< |
||||
string | undefined |
||||
>(); |
||||
const [connectedHostUUID, setConnectedHostUUID] = useState<string>(''); |
||||
const [inputHostType, setInputHostType] = useState<string>(''); |
||||
const [isInputEnterpriseKeyValid, setIsInputEnterpriseKeyValid] = |
||||
useState<boolean>(true); |
||||
const [isInputHostNameValid, setIsInputHostNameValid] = |
||||
useState<boolean>(false); |
||||
const [isInputRedhatPasswordValid, setIsInputRedhatPasswordValid] = |
||||
useState<boolean>(true); |
||||
const [isInputRedhatUserValid, setIsInputRedhatUserValid] = |
||||
useState<boolean>(true); |
||||
const [isShowAccessSection, setIsShowAccessSection] = |
||||
useState<boolean>(false); |
||||
const [isShowOptionalSection, setIsShowOptionalSection] = |
||||
useState<boolean>(false); |
||||
const [isShowRedhatPassword, setIsShowRedhatPassword] = |
||||
useState<boolean>(false); |
||||
const [isShowRedhatSection, setIsShowRedhatSection] = |
||||
useState<boolean>(false); |
||||
const [isSubmittingPrepareHost, setIsSubmittingPrepareHost] = |
||||
useState<boolean>(false); |
||||
|
||||
const setHostNameInputMessage = useCallback((message?: Message) => { |
||||
messageGroupRef.current.setMessage?.call(null, IT_IDS.hostName, message); |
||||
}, []); |
||||
const setEnterpriseKeyInputMessage = useCallback((message?: Message) => { |
||||
messageGroupRef.current.setMessage?.call( |
||||
null, |
||||
IT_IDS.enterpriseKey, |
||||
message, |
||||
); |
||||
}, []); |
||||
const setRedhatPasswordInputMessage = useCallback((message?: Message) => { |
||||
messageGroupRef.current.setMessage?.call( |
||||
null, |
||||
IT_IDS.redhatPassword, |
||||
message, |
||||
); |
||||
}, []); |
||||
const setRedhatUserInputMessage = useCallback((message?: Message) => { |
||||
messageGroupRef.current.setMessage?.call(null, IT_IDS.redhatUser, message); |
||||
}, []); |
||||
const setSubmitPrepareHostMessage = useCallback( |
||||
(message?: Message) => |
||||
messageGroupRef.current.setMessage?.call( |
||||
null, |
||||
'submitPrepareHost', |
||||
message, |
||||
), |
||||
[], |
||||
); |
||||
|
||||
const inputTests = useMemo( |
||||
() => ({ |
||||
[IT_IDS.enterpriseKey]: buildUUIDTestBatch( |
||||
ENTERPRISE_KEY_LABEL, |
||||
() => { |
||||
setEnterpriseKeyInputMessage(); |
||||
}, |
||||
undefined, |
||||
(message) => { |
||||
setEnterpriseKeyInputMessage({ children: message, type: 'warning' }); |
||||
}, |
||||
), |
||||
[IT_IDS.hostName]: buildDomainTestBatch( |
||||
HOST_NAME_LABEL, |
||||
() => { |
||||
setHostNameInputMessage(); |
||||
}, |
||||
undefined, |
||||
(message) => { |
||||
setHostNameInputMessage({ children: message, type: 'warning' }); |
||||
}, |
||||
), |
||||
[IT_IDS.redhatPassword]: buildPeacefulStringTestBatch( |
||||
REDHAT_PASSWORD_LABEL, |
||||
() => { |
||||
setRedhatPasswordInputMessage(); |
||||
}, |
||||
undefined, |
||||
(message) => { |
||||
setRedhatPasswordInputMessage({ children: message, type: 'warning' }); |
||||
}, |
||||
), |
||||
[IT_IDS.redhatUser]: buildPeacefulStringTestBatch( |
||||
REDHAT_USER_LABEL, |
||||
() => { |
||||
setRedhatUserInputMessage(); |
||||
}, |
||||
undefined, |
||||
(message) => { |
||||
setRedhatUserInputMessage({ children: message, type: 'warning' }); |
||||
}, |
||||
), |
||||
}), |
||||
[ |
||||
setEnterpriseKeyInputMessage, |
||||
setHostNameInputMessage, |
||||
setRedhatPasswordInputMessage, |
||||
setRedhatUserInputMessage, |
||||
], |
||||
); |
||||
const testInput = useMemo( |
||||
() => createTestInputFunction(inputTests), |
||||
[inputTests], |
||||
); |
||||
|
||||
const redhatElementSxDisplay = useMemo( |
||||
() => (isShowRedhatSection ? undefined : 'none'), |
||||
[isShowRedhatSection], |
||||
); |
||||
|
||||
const accessSection = useMemo( |
||||
() => ( |
||||
<GateForm |
||||
gridProps={{ |
||||
wrapperBoxProps: { |
||||
sx: { |
||||
display: isShowAccessSection ? 'flex' : 'none', |
||||
}, |
||||
}, |
||||
}} |
||||
identifierInputTestBatchBuilder={buildIPAddressTestBatch} |
||||
identifierLabel={HOST_IP_LABEL} |
||||
onIdentifierBlurAppend={({ target: { value } }) => { |
||||
if (connectedHostIPAddress) { |
||||
const isIdentifierChanged = value !== connectedHostIPAddress; |
||||
|
||||
setIsShowOptionalSection(!isIdentifierChanged); |
||||
setIsShowRedhatSection(!isIdentifierChanged); |
||||
} |
||||
}} |
||||
onSubmitAppend={( |
||||
ipAddress, |
||||
password, |
||||
setGateMessage, |
||||
setGateIsSubmitting, |
||||
) => { |
||||
const body = { ipAddress, password }; |
||||
|
||||
api |
||||
.put<APICommandInquireHostResponseBody>( |
||||
'/command/inquire-host', |
||||
body, |
||||
) |
||||
.then( |
||||
({ |
||||
data: { |
||||
hostName, |
||||
hostOS, |
||||
hostUUID, |
||||
isConnected, |
||||
isInetConnected, |
||||
isOSRegistered, |
||||
}, |
||||
}) => { |
||||
if (isConnected) { |
||||
inputHostNameRef.current.setValue?.call(null, hostName); |
||||
|
||||
const valid = testInput({ |
||||
inputs: { [IT_IDS.hostName]: { value: hostName } }, |
||||
}); |
||||
setIsInputHostNameValid(valid); |
||||
|
||||
if ( |
||||
isInetConnected && |
||||
/rhel/i.test(hostOS) && |
||||
!isOSRegistered |
||||
) { |
||||
setIsShowRedhatSection(true); |
||||
} |
||||
|
||||
setConnectedHostIPAddress(ipAddress); |
||||
setConnectedHostPassword(password); |
||||
setConnectedHostUUID(hostUUID); |
||||
|
||||
setIsShowOptionalSection(true); |
||||
} else { |
||||
setGateMessage({ |
||||
children: `Failed to establish a connection with the given host credentials.`, |
||||
type: 'error', |
||||
}); |
||||
} |
||||
}, |
||||
) |
||||
.catch((apiError) => { |
||||
const emsg = handleAPIError(apiError); |
||||
|
||||
setGateMessage?.call(null, emsg); |
||||
}) |
||||
.finally(() => { |
||||
setGateIsSubmitting(false); |
||||
}); |
||||
}} |
||||
passphraseLabel="Host root password" |
||||
submitLabel={`${connectedHostUUID ? 'Retest' : 'Test'} access`} |
||||
/> |
||||
), |
||||
[connectedHostIPAddress, connectedHostUUID, isShowAccessSection, testInput], |
||||
); |
||||
|
||||
const optionalSection = useMemo( |
||||
() => ( |
||||
<Grid |
||||
columns={GRID_COLUMNS} |
||||
layout={{ |
||||
'preparehost-host-name': { |
||||
children: ( |
||||
<InputWithRef |
||||
input={ |
||||
<OutlinedInputWithLabel |
||||
formControlProps={{ sx: { width: '100%' } }} |
||||
id="preparehost-host-name-input" |
||||
inputProps={{ |
||||
onBlur: ({ target: { value } }) => { |
||||
const valid = testInput({ |
||||
inputs: { [IT_IDS.hostName]: { value } }, |
||||
}); |
||||
setIsInputHostNameValid(valid); |
||||
}, |
||||
onFocus: () => { |
||||
setHostNameInputMessage(); |
||||
}, |
||||
}} |
||||
label={HOST_NAME_LABEL} |
||||
/> |
||||
} |
||||
ref={inputHostNameRef} |
||||
/> |
||||
), |
||||
}, |
||||
'preparehost-enterprise-key': { |
||||
children: ( |
||||
<InputWithRef |
||||
input={ |
||||
<OutlinedInputWithLabel |
||||
formControlProps={{ sx: { width: '100%' } }} |
||||
id="preparehost-enterprise-key-input" |
||||
inputProps={{ |
||||
onBlur: ({ target: { value } }) => { |
||||
if (value) { |
||||
const valid = testInput({ |
||||
inputs: { [IT_IDS.enterpriseKey]: { value } }, |
||||
}); |
||||
setIsInputEnterpriseKeyValid(valid); |
||||
} |
||||
}, |
||||
onFocus: () => { |
||||
setEnterpriseKeyInputMessage(); |
||||
}, |
||||
}} |
||||
label={ENTERPRISE_KEY_LABEL} |
||||
/> |
||||
} |
||||
ref={inputEnterpriseKeyRef} |
||||
/> |
||||
), |
||||
}, |
||||
}} |
||||
spacing={GRID_SPACING} |
||||
wrapperBoxProps={{ |
||||
sx: { display: isShowOptionalSection ? undefined : 'none' }, |
||||
}} |
||||
/> |
||||
), |
||||
[ |
||||
isShowOptionalSection, |
||||
setEnterpriseKeyInputMessage, |
||||
setHostNameInputMessage, |
||||
testInput, |
||||
], |
||||
); |
||||
|
||||
const redhatSection = useMemo( |
||||
() => ( |
||||
<Grid |
||||
columns={GRID_COLUMNS} |
||||
layout={{ |
||||
'preparehost-redhat-user': { |
||||
children: ( |
||||
<InputWithRef |
||||
input={ |
||||
<OutlinedInputWithLabel |
||||
formControlProps={{ sx: { width: '100%' } }} |
||||
id="preparehost-redhat-user-input" |
||||
inputProps={{ |
||||
onBlur: ({ target: { value } }) => { |
||||
if (value) { |
||||
const valid = testInput({ |
||||
inputs: { [IT_IDS.redhatUser]: { value } }, |
||||
}); |
||||
setIsInputRedhatUserValid(valid); |
||||
} |
||||
}, |
||||
onFocus: () => { |
||||
setRedhatUserInputMessage(); |
||||
}, |
||||
}} |
||||
label={REDHAT_USER_LABEL} |
||||
/> |
||||
} |
||||
ref={inputRedhatUser} |
||||
/> |
||||
), |
||||
}, |
||||
'preparehost-redhat-password': { |
||||
children: ( |
||||
<InputWithRef |
||||
input={ |
||||
<OutlinedInputWithLabel |
||||
formControlProps={{ sx: { width: '100%' } }} |
||||
id="preparehost-redhat-password-input" |
||||
inputProps={{ |
||||
onBlur: ({ target: { value } }) => { |
||||
if (value) { |
||||
const valid = testInput({ |
||||
inputs: { [IT_IDS.redhatPassword]: { value } }, |
||||
}); |
||||
setIsInputRedhatPasswordValid(valid); |
||||
} |
||||
}, |
||||
onFocus: () => { |
||||
setRedhatPasswordInputMessage(); |
||||
}, |
||||
onPasswordVisibilityAppend: (type) => { |
||||
setIsShowRedhatPassword(type !== INPUT_TYPES.password); |
||||
}, |
||||
type: INPUT_TYPES.password, |
||||
}} |
||||
label={REDHAT_PASSWORD_LABEL} |
||||
/> |
||||
} |
||||
ref={inputRedhatPassword} |
||||
/> |
||||
), |
||||
}, |
||||
}} |
||||
spacing={GRID_SPACING} |
||||
wrapperBoxProps={{ |
||||
sx: { display: redhatElementSxDisplay }, |
||||
}} |
||||
/> |
||||
), |
||||
[ |
||||
redhatElementSxDisplay, |
||||
setRedhatPasswordInputMessage, |
||||
setRedhatUserInputMessage, |
||||
testInput, |
||||
], |
||||
); |
||||
|
||||
const messageSection = useMemo( |
||||
() => ( |
||||
<MUIBox sx={{ display: isShowOptionalSection ? undefined : 'none' }}> |
||||
<MessageGroup count={1} ref={messageGroupRef} /> |
||||
</MUIBox> |
||||
), |
||||
[isShowOptionalSection], |
||||
); |
||||
|
||||
const submitSection = useMemo( |
||||
() => |
||||
isSubmittingPrepareHost ? ( |
||||
<Spinner mt={0} /> |
||||
) : ( |
||||
<FlexBox |
||||
row |
||||
sx={{ |
||||
display: isShowOptionalSection ? 'flex' : 'none', |
||||
justifyContent: 'flex-end', |
||||
}} |
||||
> |
||||
<ContainedButton |
||||
disabled={ |
||||
!isInputHostNameValid || |
||||
!isInputEnterpriseKeyValid || |
||||
!isInputRedhatUserValid || |
||||
!isInputRedhatPasswordValid |
||||
} |
||||
onClick={() => { |
||||
const redhatPasswordInputValue = |
||||
inputRedhatPassword.current.getValue?.call(null); |
||||
|
||||
setConfirmValues({ |
||||
enterpriseKey: |
||||
inputEnterpriseKeyRef.current.getValue?.call(null) || |
||||
'none; using community version', |
||||
hostName: inputHostNameRef.current.getValue?.call(null) || '', |
||||
redhatPassword: redhatPasswordInputValue || 'none', |
||||
redhatPasswordHidden: |
||||
redhatPasswordInputValue?.replace(/./g, '*') || 'none', |
||||
redhatUser: |
||||
inputRedhatUser.current.getValue?.call(null) || 'none', |
||||
}); |
||||
setSubmitPrepareHostMessage(); |
||||
|
||||
confirmDialogRef.current.setOpen?.call(null, true); |
||||
}} |
||||
> |
||||
Prepare host |
||||
</ContainedButton> |
||||
</FlexBox> |
||||
), |
||||
[ |
||||
isInputEnterpriseKeyValid, |
||||
isInputHostNameValid, |
||||
isInputRedhatPasswordValid, |
||||
isInputRedhatUserValid, |
||||
isShowOptionalSection, |
||||
isSubmittingPrepareHost, |
||||
setSubmitPrepareHostMessage, |
||||
], |
||||
); |
||||
|
||||
return ( |
||||
<> |
||||
<Panel> |
||||
<PanelHeader> |
||||
<HeaderText>Prepare a host to include in Anvil!</HeaderText> |
||||
</PanelHeader> |
||||
<FlexBox> |
||||
<RadioGroupWithLabel |
||||
id="preparehost-host-type" |
||||
label="Host type" |
||||
onChange={(event, value) => { |
||||
setInputHostType(value); |
||||
setIsShowAccessSection(true); |
||||
}} |
||||
radioItems={{ |
||||
node: { label: 'Subnode', value: 'node' }, |
||||
dr: { label: 'Disaster Recovery (DR) host', value: 'dr' }, |
||||
}} |
||||
/> |
||||
{accessSection} |
||||
{optionalSection} |
||||
{redhatSection} |
||||
{messageSection} |
||||
{submitSection} |
||||
</FlexBox> |
||||
</Panel> |
||||
<ConfirmDialog |
||||
actionProceedText="Prepare" |
||||
closeOnProceed |
||||
content={ |
||||
<Grid |
||||
calculateItemBreakpoints={(index) => ({ |
||||
xs: index % 2 === 0 ? 1 : 2, |
||||
})} |
||||
columns={3} |
||||
layout={{ |
||||
'preparehost-confirm-host-type-label': { |
||||
children: <BodyText>Host type</BodyText>, |
||||
}, |
||||
'preparehost-confirm-host-type-value': { |
||||
children: ( |
||||
<MonoText> |
||||
{inputHostType === 'dr' |
||||
? 'Disaster Recovery (DR)' |
||||
: 'Subnode'} |
||||
</MonoText> |
||||
), |
||||
}, |
||||
'preparehost-confirm-host-name-label': { |
||||
children: <BodyText>Host name</BodyText>, |
||||
}, |
||||
'preparehost-confirm-host-name-value': { |
||||
children: <MonoText>{confirmValues?.hostName}</MonoText>, |
||||
}, |
||||
'preparehost-confirm-enterprise-key-label': { |
||||
children: <BodyText>Alteeve enterprise key</BodyText>, |
||||
}, |
||||
'preparehost-confirm-enterprise-key-value': { |
||||
children: <MonoText>{confirmValues?.enterpriseKey}</MonoText>, |
||||
}, |
||||
'preparehost-confirm-redhat-user-label': { |
||||
children: <BodyText>RedHat user</BodyText>, |
||||
sx: { display: redhatElementSxDisplay }, |
||||
}, |
||||
'preparehost-confirm-redhat-user-value': { |
||||
children: <MonoText>{confirmValues?.redhatUser}</MonoText>, |
||||
sx: { display: redhatElementSxDisplay }, |
||||
}, |
||||
'preparehost-confirm-redhat-password-label': { |
||||
children: <BodyText>RedHat password</BodyText>, |
||||
sx: { display: redhatElementSxDisplay }, |
||||
}, |
||||
'preparehost-confirm-redhat-password-value': { |
||||
children: ( |
||||
<FlexBox |
||||
row |
||||
sx={{ |
||||
height: '100%', |
||||
maxWidth: '100%', |
||||
}} |
||||
> |
||||
<MonoText |
||||
sx={{ |
||||
flexGrow: 1, |
||||
maxWidth: 'calc(100% - 3em)', |
||||
overflowX: 'scroll', |
||||
}} |
||||
> |
||||
{isShowRedhatPassword |
||||
? confirmValues?.redhatPassword |
||||
: confirmValues?.redhatPasswordHidden} |
||||
</MonoText> |
||||
<MUIIconButton |
||||
onClick={() => { |
||||
setIsShowRedhatPassword((previous) => !previous); |
||||
}} |
||||
sx={{ color: GREY, padding: 0 }} |
||||
> |
||||
{isShowRedhatPassword ? ( |
||||
<MUIVisibilityOffIcon /> |
||||
) : ( |
||||
<MUIVisibilityIcon /> |
||||
)} |
||||
</MUIIconButton> |
||||
</FlexBox> |
||||
), |
||||
sx: { display: redhatElementSxDisplay }, |
||||
}, |
||||
}} |
||||
spacing=".6em" |
||||
/> |
||||
} |
||||
onCancelAppend={() => { |
||||
setIsShowRedhatPassword(false); |
||||
}} |
||||
onProceedAppend={() => { |
||||
setIsSubmittingPrepareHost(true); |
||||
|
||||
api |
||||
.put('/host/prepare', { |
||||
enterpriseUUID: |
||||
inputEnterpriseKeyRef.current.getValue?.call(null), |
||||
hostIPAddress: connectedHostIPAddress, |
||||
hostName: inputHostNameRef.current.getValue?.call(null), |
||||
hostPassword: connectedHostPassword, |
||||
hostType: inputHostType, |
||||
hostUUID: connectedHostUUID, |
||||
redhatPassword: inputRedhatPassword.current.getValue?.call(null), |
||||
redhatUser: inputRedhatUser.current.getValue?.call(null), |
||||
}) |
||||
.then(() => { |
||||
setSubmitPrepareHostMessage({ |
||||
children: `Successfully initiated prepare host.`, |
||||
}); |
||||
|
||||
setTimeout(() => { |
||||
setSubmitPrepareHostMessage(); |
||||
}, SUCCESS_MESSAGE_TIMEOUT); |
||||
}) |
||||
.catch((error) => { |
||||
const errorMessage = handleAPIError(error, { |
||||
onResponseErrorAppend: ({ status }) => { |
||||
let result: Message | undefined; |
||||
|
||||
if (status === 400) { |
||||
result = { |
||||
children: `The API found invalid values. Did you forget to fill in one of the RedHat fields?`, |
||||
type: 'warning', |
||||
}; |
||||
} |
||||
|
||||
return result; |
||||
}, |
||||
}); |
||||
|
||||
setSubmitPrepareHostMessage(errorMessage); |
||||
}) |
||||
.finally(() => { |
||||
setIsSubmittingPrepareHost(false); |
||||
}); |
||||
}} |
||||
ref={confirmDialogRef} |
||||
titleText="Confirm host preparation" |
||||
/> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default PrepareHostForm; |
||||
Loading…
Reference in new issue