diff --git a/striker-ui/components/ProvisionServerDialog.tsx b/striker-ui/components/ProvisionServerDialog.tsx index 51850730..24c185a5 100644 --- a/striker-ui/components/ProvisionServerDialog.tsx +++ b/striker-ui/components/ProvisionServerDialog.tsx @@ -13,6 +13,7 @@ import { FormatDataSizeInputValue, } from 'format-data-size'; +import Autocomplete from './Autocomplete'; import MenuItem from './MenuItem'; import OutlinedInput, { OutlinedInputProps } from './OutlinedInput'; import OutlinedInputLabel from './OutlinedInputLabel'; @@ -21,6 +22,8 @@ import Select, { SelectProps } from './Select'; import Slider, { SliderProps } from './Slider'; import { BodyText, HeaderText } from './Text'; import ContainedButton from './ContainedButton'; +import { OutlinedInputLabelProps } from './OutlinedInputLabel/OutlinedInputLabel'; +import OutlinedInputWithLabel from './OutlinedInputWithLabel'; type SelectItem = { displayValue?: SelectItemValueType; @@ -291,18 +294,6 @@ const DATA_SIZE_UNITS: SelectItem[] = [ { value: 'TB' }, ]; -const createOutlinedInput = ( - id: string, - label: string, - inputProps?: Partial, -): JSX.Element => ( - - {label} - {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - -); - const createOutlinedSelect = ( id: string, label: string | undefined, @@ -378,9 +369,11 @@ const createOutlinedInputWithSelect = ( selectItems: SelectItem[], { inputProps, + inputLabelProps, selectProps, }: { inputProps?: Partial; + inputLabelProps?: Partial; selectProps?: Partial; } = {}, ) => ( @@ -394,7 +387,7 @@ const createOutlinedInputWithSelect = ( }, }} > - {createOutlinedInput(id, label, inputProps)} + {createOutlinedSelect(`${id}-nested-select`, undefined, selectItems, { selectProps, })} @@ -596,6 +589,21 @@ const dSize = ( } }; +const dSizeToBytes = ( + value: FormatDataSizeInputValue, + fromUnit: DataSizeUnit, + onSuccess: (newValue: bigint, unit: DataSizeUnit) => void, +) => { + dSize(value, { + fromUnit, + onSuccess: { + bigint: onSuccess, + }, + precision: 0, + toUnit: 'B', + }); +}; + const filterAnvils = ( organizedAnvils: OrganizedAnvilDetailMetadataForProvisionServer[], cpuCores: number, @@ -688,9 +696,14 @@ const ProvisionServerDialog = ({ value: fileUUID, })); - // const optimizeOSList = data.osList.map((keyValuePair) => - // keyValuePair.split(','), - // ); + const optimizeOSList = data.osList.map((keyValuePair) => { + const [osKey, osValue] = keyValuePair.split(','); + + return { + label: osValue, + key: osKey, + }; + }); useEffect(() => { setInputCPUCoresMax(maxCPUCores); @@ -712,7 +725,7 @@ const ProvisionServerDialog = ({ - {createOutlinedInput('ps-server-name', 'Server name')} + {createOutlinedSlider('ps-cpu-cores', 'CPU cores', cpuCoresValue, { sliderProps: { onChange: (value) => { @@ -731,16 +744,7 @@ const ProvisionServerDialog = ({ onChange: ({ target: { value } }) => { setInputMemoryValue(value); - dSize(value, { - fromUnit: inputMemoryUnit, - onSuccess: { - bigint: (newValue) => { - setMemoryValue(newValue); - }, - }, - precision: 0, - toUnit: 'B', - }); + dSizeToBytes(value, inputMemoryUnit, setMemoryValue); }, value: inputMemoryValue, }, @@ -750,16 +754,7 @@ const ProvisionServerDialog = ({ setInputMemoryUnit(selectedUnit); - dSize(inputMemoryValue, { - fromUnit: selectedUnit, - onSuccess: { - bigint: (newValue) => { - setMemoryValue(newValue); - }, - }, - precision: 0, - toUnit: 'B', - }); + dSizeToBytes(inputMemoryValue, selectedUnit, setMemoryValue); }, value: inputMemoryUnit, }, @@ -777,16 +772,11 @@ const ProvisionServerDialog = ({ onChange: ({ target: { value } }) => { setInputVirtualDiskSizeValue(value); - dSize(value, { - fromUnit: inputVirtualDiskSizeUnit, - onSuccess: { - bigint: (newValue) => { - setVirtualDiskSizeValue(newValue); - }, - }, - precision: 0, - toUnit: 'B', - }); + dSizeToBytes( + value, + inputVirtualDiskSizeUnit, + setVirtualDiskSizeValue, + ); }, value: inputVirtualDiskSizeValue, }, @@ -796,16 +786,11 @@ const ProvisionServerDialog = ({ setInputVirtualDiskSizeUnit(selectedUnit); - dSize(inputVirtualDiskSizeValue, { - fromUnit: selectedUnit, - onSuccess: { - bigint: (newValue) => { - setVirtualDiskSizeValue(newValue); - }, - }, - precision: 0, - toUnit: 'B', - }); + dSizeToBytes( + inputVirtualDiskSizeValue, + selectedUnit, + setVirtualDiskSizeValue, + ); }, value: inputVirtualDiskSizeUnit, }, @@ -979,12 +964,13 @@ const ProvisionServerDialog = ({ }, }, )} - {/* - {createOutlinedSelect( - 'ps-optimize-for-os', - 'Optimize for OS', - optimizeOSList, - )} */} + Provision