Tsu-ba-me
2 years ago
parent
f59d273ebb
commit
768ef98f51
7 changed files with 908 additions and 9 deletions
@ -0,0 +1,34 @@ |
|||||||
|
import { ReactElement } from 'react'; |
||||||
|
|
||||||
|
import AnvilIdInputGroup, { |
||||||
|
INPUT_ID_ANVIL_ID_DOMAIN, |
||||||
|
INPUT_ID_ANVIL_ID_PREFIX, |
||||||
|
INPUT_ID_ANVIL_ID_SEQUENCE, |
||||||
|
} from './AnvilIdInputGroup'; |
||||||
|
import AnvilNetworkConfigInputGroup, { |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_DNS, |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_MTU, |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_NTP, |
||||||
|
} from './AnvilNetworkConfigInputGroup'; |
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
|
||||||
|
const AddAnvilManifestInputGroup = < |
||||||
|
M extends { |
||||||
|
[K in |
||||||
|
| typeof INPUT_ID_ANVIL_ID_DOMAIN |
||||||
|
| typeof INPUT_ID_ANVIL_ID_PREFIX |
||||||
|
| typeof INPUT_ID_ANVIL_ID_SEQUENCE |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_DNS |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_MTU |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_NTP]: string; |
||||||
|
}, |
||||||
|
>({ |
||||||
|
formUtils, |
||||||
|
}: AddAnvilInputGroupProps<M>): ReactElement => ( |
||||||
|
<FlexBox> |
||||||
|
<AnvilIdInputGroup formUtils={formUtils} /> |
||||||
|
<AnvilNetworkConfigInputGroup formUtils={formUtils} /> |
||||||
|
</FlexBox> |
||||||
|
); |
||||||
|
|
||||||
|
export default AddAnvilManifestInputGroup; |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
import { ReactElement, useMemo } from 'react'; |
||||||
|
|
||||||
|
import NETWORK_TYPES from '../../lib/consts/NETWORK_TYPES'; |
||||||
|
|
||||||
|
import Grid from '../Grid'; |
||||||
|
import InputWithRef from '../InputWithRef'; |
||||||
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel'; |
||||||
|
import { InnerPanel, InnerPanelBody, InnerPanelHeader } from '../Panels'; |
||||||
|
import SwitchWithLabel from '../SwitchWithLabel'; |
||||||
|
import { |
||||||
|
buildIPAddressTestBatch, |
||||||
|
buildNumberTestBatch, |
||||||
|
} from '../../lib/test_input'; |
||||||
|
import { BodyText } from '../Text'; |
||||||
|
|
||||||
|
const INPUT_ID_PREFIX_ANVIL_HOST_CONFIG = 'anvil-host-config-input'; |
||||||
|
|
||||||
|
const INPUT_CELL_ID_PREFIX_ANVIL_HOST_CONFIG = `${INPUT_ID_PREFIX_ANVIL_HOST_CONFIG}-cell`; |
||||||
|
|
||||||
|
const AnvilHostInputGroup = <M extends MapToInputTestID>({ |
||||||
|
formUtils: { |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
buildInputFirstRenderFunction, |
||||||
|
msgSetters, |
||||||
|
setMsgSetter, |
||||||
|
}, |
||||||
|
hostLabel, |
||||||
|
previous: { fences = {}, networks = {}, upses = {} } = {}, |
||||||
|
}: AnvilHostInputGroupProps<M>): ReactElement => { |
||||||
|
const gridLayout = useMemo(() => { |
||||||
|
let result: GridLayout = {}; |
||||||
|
|
||||||
|
result = Object.entries(networks).reduce<GridLayout>( |
||||||
|
(previous, [networkId, { networkIp, networkNumber, networkType }]) => { |
||||||
|
const idPostfix = `${networkId}-ip`; |
||||||
|
|
||||||
|
const cellId = `${INPUT_CELL_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
|
||||||
|
const inputId = `${INPUT_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
const inputLabel = `${NETWORK_TYPES[networkType]} ${networkNumber}`; |
||||||
|
|
||||||
|
setMsgSetter(inputId); |
||||||
|
|
||||||
|
previous[cellId] = { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={inputId} |
||||||
|
label={inputLabel} |
||||||
|
value={networkIp} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildIPAddressTestBatch( |
||||||
|
inputLabel, |
||||||
|
() => { |
||||||
|
msgSetters[inputId](); |
||||||
|
}, |
||||||
|
{ onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, |
||||||
|
(message) => { |
||||||
|
msgSetters[inputId]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction(inputId)} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
result, |
||||||
|
); |
||||||
|
|
||||||
|
result = Object.entries(fences).reduce<GridLayout>( |
||||||
|
(previous, [fenceId, { fenceName, fencePort }]) => { |
||||||
|
const idPostfix = `${fenceId}-port`; |
||||||
|
|
||||||
|
const cellId = `${INPUT_CELL_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
|
||||||
|
const inputId = `${INPUT_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
const inputLabel = fenceName; |
||||||
|
|
||||||
|
setMsgSetter(inputId); |
||||||
|
|
||||||
|
previous[cellId] = { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={inputId} |
||||||
|
label={fenceName} |
||||||
|
value={fencePort} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildNumberTestBatch( |
||||||
|
inputLabel, |
||||||
|
() => { |
||||||
|
msgSetters[inputId](); |
||||||
|
}, |
||||||
|
{ onFinishBatch: buildFinishInputTestBatchFunction(inputId) }, |
||||||
|
(message) => { |
||||||
|
msgSetters[inputId]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
required |
||||||
|
valueType="number" |
||||||
|
/> |
||||||
|
), |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
result, |
||||||
|
); |
||||||
|
|
||||||
|
result = Object.entries(upses).reduce<GridLayout>( |
||||||
|
(previous, [upsId, { isPowerHost, upsName }]) => { |
||||||
|
const idPostfix = `${upsId}-power-host`; |
||||||
|
|
||||||
|
const cellId = `${INPUT_CELL_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
|
||||||
|
const inputId = `${INPUT_ID_PREFIX_ANVIL_HOST_CONFIG}-${idPostfix}`; |
||||||
|
|
||||||
|
previous[cellId] = { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<SwitchWithLabel |
||||||
|
id={inputId} |
||||||
|
label={upsName} |
||||||
|
checked={isPowerHost} |
||||||
|
/> |
||||||
|
} |
||||||
|
valueType="boolean" |
||||||
|
/> |
||||||
|
), |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
result, |
||||||
|
); |
||||||
|
|
||||||
|
return result; |
||||||
|
}, [ |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
buildInputFirstRenderFunction, |
||||||
|
setMsgSetter, |
||||||
|
fences, |
||||||
|
msgSetters, |
||||||
|
networks, |
||||||
|
upses, |
||||||
|
]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<InnerPanel> |
||||||
|
<InnerPanelHeader> |
||||||
|
<BodyText>{hostLabel}</BodyText> |
||||||
|
</InnerPanelHeader> |
||||||
|
<InnerPanelBody> |
||||||
|
<Grid layout={gridLayout} spacing="1em" /> |
||||||
|
</InnerPanelBody> |
||||||
|
</InnerPanel> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AnvilHostInputGroup; |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
import { ReactElement } from 'react'; |
||||||
|
|
||||||
|
import Grid from '../Grid'; |
||||||
|
import InputWithRef from '../InputWithRef'; |
||||||
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel'; |
||||||
|
import { |
||||||
|
buildNumberTestBatch, |
||||||
|
buildPeacefulStringTestBatch, |
||||||
|
} from '../../lib/test_input'; |
||||||
|
|
||||||
|
const INPUT_ID_ANVIL_ID_DOMAIN = 'anvil-id-input-domain'; |
||||||
|
const INPUT_ID_ANVIL_ID_PREFIX = 'anvil-id-input-prefix'; |
||||||
|
const INPUT_ID_ANVIL_ID_SEQUENCE = 'anvil-id-input-sequence'; |
||||||
|
|
||||||
|
const INPUT_LABEL_ANVIL_ID_DOMAIN = 'Domain name'; |
||||||
|
const INPUT_LABEL_ANVIL_ID_PREFIX = 'Anvil! prefix'; |
||||||
|
const INPUT_LABEL_ANVIL_ID_SEQUENCE = 'Anvil! sequence'; |
||||||
|
|
||||||
|
const AnvilIdInputGroup = < |
||||||
|
M extends { |
||||||
|
[K in |
||||||
|
| typeof INPUT_ID_ANVIL_ID_DOMAIN |
||||||
|
| typeof INPUT_ID_ANVIL_ID_PREFIX |
||||||
|
| typeof INPUT_ID_ANVIL_ID_SEQUENCE]: string; |
||||||
|
}, |
||||||
|
>({ |
||||||
|
formUtils: { |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
buildInputFirstRenderFunction, |
||||||
|
msgSetters, |
||||||
|
}, |
||||||
|
previous: { |
||||||
|
anvilIdDomain: previousDomain, |
||||||
|
anvilIdPrefix: previousPrefix, |
||||||
|
anvilIdSequence: previousSequence, |
||||||
|
} = {}, |
||||||
|
}: AnvilIdInputGroupProps<M>): ReactElement => ( |
||||||
|
<Grid |
||||||
|
columns={{ xs: 1, sm: 2, md: 3 }} |
||||||
|
layout={{ |
||||||
|
'anvil-id-input-cell-prefix': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_ID_PREFIX} |
||||||
|
label={INPUT_LABEL_ANVIL_ID_PREFIX} |
||||||
|
value={previousPrefix} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildPeacefulStringTestBatch( |
||||||
|
INPUT_LABEL_ANVIL_ID_PREFIX, |
||||||
|
() => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_PREFIX](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: buildFinishInputTestBatchFunction( |
||||||
|
INPUT_ID_ANVIL_ID_PREFIX, |
||||||
|
), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_PREFIX]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction( |
||||||
|
INPUT_ID_ANVIL_ID_PREFIX, |
||||||
|
)} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
'anvil-id-input-cell-domain': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_ID_DOMAIN} |
||||||
|
label={INPUT_LABEL_ANVIL_ID_DOMAIN} |
||||||
|
value={previousDomain} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildPeacefulStringTestBatch( |
||||||
|
INPUT_LABEL_ANVIL_ID_DOMAIN, |
||||||
|
() => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_DOMAIN](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: buildFinishInputTestBatchFunction( |
||||||
|
INPUT_ID_ANVIL_ID_DOMAIN, |
||||||
|
), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_DOMAIN]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction( |
||||||
|
INPUT_ID_ANVIL_ID_DOMAIN, |
||||||
|
)} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
'anvil-id-input-cell-sequence': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_ID_SEQUENCE} |
||||||
|
label={INPUT_LABEL_ANVIL_ID_SEQUENCE} |
||||||
|
value={previousSequence} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildNumberTestBatch( |
||||||
|
INPUT_LABEL_ANVIL_ID_SEQUENCE, |
||||||
|
() => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_SEQUENCE](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: buildFinishInputTestBatchFunction( |
||||||
|
INPUT_ID_ANVIL_ID_SEQUENCE, |
||||||
|
), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_ID_SEQUENCE]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction( |
||||||
|
INPUT_ID_ANVIL_ID_SEQUENCE, |
||||||
|
)} |
||||||
|
required |
||||||
|
valueType="number" |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
}} |
||||||
|
spacing="1em" |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
export { |
||||||
|
INPUT_ID_ANVIL_ID_DOMAIN, |
||||||
|
INPUT_ID_ANVIL_ID_PREFIX, |
||||||
|
INPUT_ID_ANVIL_ID_SEQUENCE, |
||||||
|
}; |
||||||
|
|
||||||
|
export default AnvilIdInputGroup; |
||||||
@ -0,0 +1,203 @@ |
|||||||
|
import { ReactElement, useMemo } from 'react'; |
||||||
|
|
||||||
|
import NETWORK_TYPES from '../../lib/consts/NETWORK_TYPES'; |
||||||
|
|
||||||
|
import AnvilNetworkInputGroup from './AnvilNetworkInputGroup'; |
||||||
|
import Grid from '../Grid'; |
||||||
|
import InputWithRef from '../InputWithRef'; |
||||||
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel'; |
||||||
|
import { buildNumberTestBatch } from '../../lib/test_input'; |
||||||
|
|
||||||
|
const INPUT_ID_PREFIX_ANVIL_NETWORK_CONFIG = 'anvil-network-config-input'; |
||||||
|
|
||||||
|
const INPUT_CELL_ID_PREFIX_ANVIL_NETWORK_CONFIG = `${INPUT_ID_PREFIX_ANVIL_NETWORK_CONFIG}-cell`; |
||||||
|
|
||||||
|
const INPUT_ID_ANVIL_NETWORK_CONFIG_DNS = 'anvil-network-config-input-dns'; |
||||||
|
const INPUT_ID_ANVIL_NETWORK_CONFIG_MTU = 'anvil-network-config-input-mtu'; |
||||||
|
const INPUT_ID_ANVIL_NETWORK_CONFIG_NTP = 'anvil-network-config-input-ntp'; |
||||||
|
|
||||||
|
const INPUT_LABEL_ANVIL_NETWORK_CONFIG_DNS = 'DNS'; |
||||||
|
const INPUT_LABEL_ANVIL_NETWORK_CONFIG_MTU = 'MTU'; |
||||||
|
const INPUT_LABEL_ANVIL_NETWORK_CONFIG_NTP = 'NTP'; |
||||||
|
|
||||||
|
const DEFAULT_NETWORKS: { [networkId: string]: AnvilNetworkConfigNetwork } = { |
||||||
|
bcn1: { |
||||||
|
networkMinIp: '', |
||||||
|
networkNumber: 1, |
||||||
|
networkSubnetMask: '', |
||||||
|
networkType: 'bcn', |
||||||
|
}, |
||||||
|
sn1: { |
||||||
|
networkMinIp: '', |
||||||
|
networkNumber: 1, |
||||||
|
networkSubnetMask: '', |
||||||
|
networkType: 'sn', |
||||||
|
}, |
||||||
|
ifn1: { |
||||||
|
networkMinIp: '', |
||||||
|
networkNumber: 1, |
||||||
|
networkSubnetMask: '', |
||||||
|
networkType: 'ifn', |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const AnvilNetworkConfigInputGroup = < |
||||||
|
M extends MapToInputTestID & { |
||||||
|
[K in |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_DNS |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_MTU |
||||||
|
| typeof INPUT_ID_ANVIL_NETWORK_CONFIG_NTP]: string; |
||||||
|
}, |
||||||
|
>({ |
||||||
|
formUtils, |
||||||
|
previous: { |
||||||
|
dnsCsv: previousDnsCsv, |
||||||
|
mtu: previousMtu, |
||||||
|
networks = DEFAULT_NETWORKS, |
||||||
|
ntpCsv: previousNtpCsv, |
||||||
|
} = {}, |
||||||
|
}: AnvilNetworkConfigInputGroupProps<M>): ReactElement => { |
||||||
|
const { |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
buildInputFirstRenderFunction, |
||||||
|
msgSetters, |
||||||
|
} = formUtils; |
||||||
|
|
||||||
|
const networksGridLayout = useMemo<GridLayout>(() => { |
||||||
|
let result: GridLayout = {}; |
||||||
|
|
||||||
|
result = Object.entries(networks).reduce<GridLayout>( |
||||||
|
( |
||||||
|
previous, |
||||||
|
[ |
||||||
|
networkId, |
||||||
|
{ |
||||||
|
networkGateway: previousGateway, |
||||||
|
networkMinIp: previousMinIp, |
||||||
|
networkNumber, |
||||||
|
networkSubnetMask: previousSubnetMask, |
||||||
|
networkType, |
||||||
|
}, |
||||||
|
], |
||||||
|
) => { |
||||||
|
const cellId = `${INPUT_CELL_ID_PREFIX_ANVIL_NETWORK_CONFIG}-${networkId}`; |
||||||
|
|
||||||
|
const idPrefix = `anvil-network-${networkId}`; |
||||||
|
|
||||||
|
const inputIdPrefix = `${INPUT_ID_PREFIX_ANVIL_NETWORK_CONFIG}-${networkId}`; |
||||||
|
const inputGatewayId = `${inputIdPrefix}-gateway`; |
||||||
|
const inputMinIpId = `${inputIdPrefix}-min-ip`; |
||||||
|
const inputSubnetMaskId = `${inputIdPrefix}-subnet-mask`; |
||||||
|
|
||||||
|
const networkName = `${NETWORK_TYPES[networkType]} ${networkNumber}`; |
||||||
|
|
||||||
|
const isShowGateway = networkType === 'ifn'; |
||||||
|
|
||||||
|
previous[cellId] = { |
||||||
|
children: ( |
||||||
|
<AnvilNetworkInputGroup |
||||||
|
formUtils={formUtils} |
||||||
|
idPrefix={idPrefix} |
||||||
|
inputGatewayId={inputGatewayId} |
||||||
|
inputMinIpId={inputMinIpId} |
||||||
|
inputSubnetMaskId={inputSubnetMaskId} |
||||||
|
networkName={networkName} |
||||||
|
previous={{ |
||||||
|
gateway: previousGateway, |
||||||
|
minIp: previousMinIp, |
||||||
|
subnetMask: previousSubnetMask, |
||||||
|
}} |
||||||
|
showGateway={isShowGateway} |
||||||
|
/> |
||||||
|
), |
||||||
|
md: 3, |
||||||
|
sm: 2, |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
result, |
||||||
|
); |
||||||
|
|
||||||
|
return result; |
||||||
|
}, [formUtils, networks]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Grid |
||||||
|
columns={{ xs: 1, sm: 2, md: 3 }} |
||||||
|
layout={{ |
||||||
|
...networksGridLayout, |
||||||
|
'anvil-network-config-input-cell-dns': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_NETWORK_CONFIG_DNS} |
||||||
|
label={INPUT_LABEL_ANVIL_NETWORK_CONFIG_DNS} |
||||||
|
value={previousDnsCsv} |
||||||
|
/> |
||||||
|
} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
'anvil-network-config-input-cell-ntp': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_NETWORK_CONFIG_NTP} |
||||||
|
label={INPUT_LABEL_ANVIL_NETWORK_CONFIG_NTP} |
||||||
|
value={previousNtpCsv} |
||||||
|
/> |
||||||
|
} |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
'anvil-network-config-input-cell-mtu': { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={INPUT_ID_ANVIL_NETWORK_CONFIG_MTU} |
||||||
|
inputProps={{ placeholder: '1500' }} |
||||||
|
label={INPUT_LABEL_ANVIL_NETWORK_CONFIG_MTU} |
||||||
|
value={previousMtu} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildNumberTestBatch( |
||||||
|
INPUT_LABEL_ANVIL_NETWORK_CONFIG_MTU, |
||||||
|
() => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_NETWORK_CONFIG_MTU](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: buildFinishInputTestBatchFunction( |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_MTU, |
||||||
|
), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[INPUT_ID_ANVIL_NETWORK_CONFIG_MTU]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction( |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_MTU, |
||||||
|
)} |
||||||
|
valueType="number" |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
}} |
||||||
|
spacing="1em" |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export { |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_DNS, |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_MTU, |
||||||
|
INPUT_ID_ANVIL_NETWORK_CONFIG_NTP, |
||||||
|
}; |
||||||
|
|
||||||
|
export default AnvilNetworkConfigInputGroup; |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
import { ReactElement, ReactNode, useEffect, useMemo } from 'react'; |
||||||
|
|
||||||
|
import Grid from '../Grid'; |
||||||
|
import IconButton from '../IconButton'; |
||||||
|
import InputWithRef from '../InputWithRef'; |
||||||
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel'; |
||||||
|
import { InnerPanel, InnerPanelBody, InnerPanelHeader } from '../Panels'; |
||||||
|
import { buildIPAddressTestBatch } from '../../lib/test_input'; |
||||||
|
import { BodyText } from '../Text'; |
||||||
|
|
||||||
|
const AnvilNetworkInputGroup = <M extends MapToInputTestID>({ |
||||||
|
formUtils: { |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
buildInputFirstRenderFunction, |
||||||
|
msgSetters, |
||||||
|
setMsgSetter, |
||||||
|
}, |
||||||
|
idPrefix, |
||||||
|
inputGatewayId, |
||||||
|
inputGatewayLabel = 'Gateway', |
||||||
|
inputMinIpId, |
||||||
|
inputMinIpLabel = 'IP address', |
||||||
|
inputSubnetMaskId, |
||||||
|
inputSubnetMaskLabel = 'Subnet mask', |
||||||
|
networkName, |
||||||
|
previous: { |
||||||
|
gateway: previousGateway, |
||||||
|
minIp: previousIpAddress, |
||||||
|
subnetMask: previousSubnetMask, |
||||||
|
} = {}, |
||||||
|
showGateway: isShowGateway, |
||||||
|
}: AnvilNetworkInputGroupProps<M>): ReactElement => { |
||||||
|
const inputCellGatewayId = useMemo( |
||||||
|
() => `${idPrefix}-input-cell-gateway`, |
||||||
|
[idPrefix], |
||||||
|
); |
||||||
|
const inputCellIpId = useMemo(() => `${idPrefix}-input-cell-ip`, [idPrefix]); |
||||||
|
const inputCellSubnetMaskId = useMemo( |
||||||
|
() => `${idPrefix}-input-cell-subnet-mask`, |
||||||
|
[idPrefix], |
||||||
|
); |
||||||
|
|
||||||
|
const inputCellGatewayDisplay = useMemo( |
||||||
|
() => (isShowGateway ? undefined : 'none'), |
||||||
|
[isShowGateway], |
||||||
|
); |
||||||
|
|
||||||
|
const inputGatewayElement = useMemo<ReactNode>(() => { |
||||||
|
let result: ReactNode; |
||||||
|
|
||||||
|
if (isShowGateway && inputGatewayId) { |
||||||
|
setMsgSetter(inputGatewayId); |
||||||
|
|
||||||
|
result = ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={inputGatewayId} |
||||||
|
label={inputGatewayLabel} |
||||||
|
value={previousGateway} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildIPAddressTestBatch( |
||||||
|
`${networkName} ${inputGatewayLabel}`, |
||||||
|
() => { |
||||||
|
msgSetters[inputGatewayId](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: buildFinishInputTestBatchFunction(inputGatewayId), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[inputGatewayId]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
required={isShowGateway} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return result; |
||||||
|
}, [ |
||||||
|
isShowGateway, |
||||||
|
inputGatewayId, |
||||||
|
setMsgSetter, |
||||||
|
inputGatewayLabel, |
||||||
|
previousGateway, |
||||||
|
networkName, |
||||||
|
buildFinishInputTestBatchFunction, |
||||||
|
msgSetters, |
||||||
|
]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setMsgSetter(inputMinIpId); |
||||||
|
setMsgSetter(inputSubnetMaskId); |
||||||
|
}, [inputMinIpId, inputSubnetMaskId, setMsgSetter]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<InnerPanel mv={0}> |
||||||
|
<InnerPanelHeader> |
||||||
|
<BodyText>{networkName}</BodyText> |
||||||
|
<IconButton |
||||||
|
mapPreset="close" |
||||||
|
iconProps={{ fontSize: 'small' }} |
||||||
|
sx={{ |
||||||
|
padding: '.2em', |
||||||
|
position: 'absolute', |
||||||
|
right: '-.6rem', |
||||||
|
top: '-.2rem', |
||||||
|
}} |
||||||
|
/> |
||||||
|
</InnerPanelHeader> |
||||||
|
|
||||||
|
<InnerPanelBody> |
||||||
|
<Grid |
||||||
|
layout={{ |
||||||
|
[inputCellIpId]: { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={inputMinIpId} |
||||||
|
label={inputMinIpLabel} |
||||||
|
value={previousIpAddress} |
||||||
|
/> |
||||||
|
} |
||||||
|
inputTestBatch={buildIPAddressTestBatch( |
||||||
|
`${networkName} ${inputMinIpLabel}`, |
||||||
|
() => { |
||||||
|
msgSetters[inputMinIpId](); |
||||||
|
}, |
||||||
|
{ |
||||||
|
onFinishBatch: |
||||||
|
buildFinishInputTestBatchFunction(inputMinIpId), |
||||||
|
}, |
||||||
|
(message) => { |
||||||
|
msgSetters[inputMinIpId]({ |
||||||
|
children: message, |
||||||
|
}); |
||||||
|
}, |
||||||
|
)} |
||||||
|
onFirstRender={buildInputFirstRenderFunction(inputMinIpId)} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
[inputCellSubnetMaskId]: { |
||||||
|
children: ( |
||||||
|
<InputWithRef |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={inputSubnetMaskId} |
||||||
|
label={inputSubnetMaskLabel} |
||||||
|
value={previousSubnetMask} |
||||||
|
/> |
||||||
|
} |
||||||
|
required |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
[inputCellGatewayId]: { |
||||||
|
children: inputGatewayElement, |
||||||
|
display: inputCellGatewayDisplay, |
||||||
|
}, |
||||||
|
}} |
||||||
|
spacing="1em" |
||||||
|
/> |
||||||
|
</InnerPanelBody> |
||||||
|
</InnerPanel> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AnvilNetworkInputGroup; |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
type AnvilIdInputGroupOptionalProps = { |
||||||
|
previous?: { |
||||||
|
anvilIdPrefix?: string; |
||||||
|
anvilIdDomain?: string; |
||||||
|
anvilIdSequence?: number; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilIdInputGroupProps<M extends MapToInputTestID> = |
||||||
|
AnvilIdInputGroupOptionalProps & { |
||||||
|
formUtils: FormUtils<M>; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilNetworkInputGroupOptionalProps = { |
||||||
|
inputGatewayId?: string; |
||||||
|
inputGatewayLabel?: string; |
||||||
|
inputMinIpLabel?: string; |
||||||
|
inputSubnetMaskLabel?: string; |
||||||
|
previous?: { |
||||||
|
gateway?: string; |
||||||
|
minIp?: string; |
||||||
|
subnetMask?: string; |
||||||
|
}; |
||||||
|
showGateway?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilNetworkInputGroupProps<M extends MapToInputTestID> = |
||||||
|
AnvilNetworkInputGroupOptionalProps & { |
||||||
|
formUtils: FormUtils<M>; |
||||||
|
idPrefix: string; |
||||||
|
inputMinIpId: string; |
||||||
|
inputSubnetMaskId: string; |
||||||
|
networkName: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilHostInputGroupOptionalProps = { |
||||||
|
previous?: { |
||||||
|
fences?: { |
||||||
|
[fenceId: string]: { |
||||||
|
fenceName: string; |
||||||
|
fencePort: number; |
||||||
|
}; |
||||||
|
}; |
||||||
|
networks?: { |
||||||
|
[networkId: string]: { |
||||||
|
networkIp: string; |
||||||
|
networkNumber: number; |
||||||
|
networkType: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
upses?: { |
||||||
|
[upsId: string]: { |
||||||
|
isPowerHost: boolean; |
||||||
|
upsName: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilHostInputGroupProps<M extends MapToInputTestID> = |
||||||
|
AnvilHostInputGroupOptionalProps & { |
||||||
|
formUtils: FormUtils<M>; |
||||||
|
hostLabel: string; |
||||||
|
idPrefix: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilNetworkConfigNetwork = { |
||||||
|
networkGateway?: string; |
||||||
|
networkMinIp: string; |
||||||
|
networkNumber: number; |
||||||
|
networkSubnetMask: string; |
||||||
|
networkType: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilNetworkConfigInputGroupOptionalProps = { |
||||||
|
previous?: { |
||||||
|
dnsCsv?: string; |
||||||
|
/** Max Transmission Unit (MTU); unit: bytes */ |
||||||
|
mtu?: number; |
||||||
|
networks?: { |
||||||
|
[networkId: string]: AnvilNetworkConfigNetwork; |
||||||
|
}; |
||||||
|
ntpCsv?: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type AnvilNetworkConfigInputGroupProps<M extends MapToInputTestID> = |
||||||
|
AnvilNetworkConfigInputGroupOptionalProps & { |
||||||
|
formUtils: FormUtils<M>; |
||||||
|
}; |
||||||
|
|
||||||
|
type AddAnvilInputGroupProps<M extends MapToInputTestID> = { |
||||||
|
formUtils: FormUtils<M>; |
||||||
|
}; |
||||||
Loading…
Reference in new issue