fix(striker-ui): swap slider with autocomplete for cores in provision server

main
Tsu-ba-me 1 year ago
parent 331c961995
commit 21e410784f
  1. 72
      striker-ui/components/ProvisionServerDialog.tsx

@ -4,6 +4,7 @@ import {
SetStateAction, SetStateAction,
useCallback, useCallback,
useEffect, useEffect,
useMemo,
useState, useState,
} from 'react'; } from 'react';
import { Box, Dialog, DialogProps, Grid } from '@mui/material'; import { Box, Dialog, DialogProps, Grid } from '@mui/material';
@ -24,7 +25,6 @@ import OutlinedInputWithLabel from './OutlinedInputWithLabel';
import OutlinedLabeledInputWithSelect from './OutlinedLabeledInputWithSelect'; import OutlinedLabeledInputWithSelect from './OutlinedLabeledInputWithSelect';
import { Panel, PanelHeader } from './Panels'; import { Panel, PanelHeader } from './Panels';
import SelectWithLabel from './SelectWithLabel'; import SelectWithLabel from './SelectWithLabel';
import Slider, { SliderProps } from './Slider';
import Spinner from './Spinner'; import Spinner from './Spinner';
import { import {
testInput as baseTestInput, testInput as baseTestInput,
@ -222,23 +222,6 @@ const PROVISION_BUTTON_STYLES = {
}, },
}; };
const createOutlinedSlider = (
id: string,
label: string,
value: number,
sliderProps?: Partial<SliderProps>,
): JSX.Element => (
<Slider
{...{
isAllowTextInput: true,
label,
labelId: `${id}-label`,
value,
...sliderProps,
}}
/>
);
const createMaxValueButton = ( const createMaxValueButton = (
maxValue: string, maxValue: string,
{ {
@ -999,6 +982,16 @@ const ProvisionServerDialog = ({
const [successfulProvisionCount, setSuccessfulProvisionCount] = const [successfulProvisionCount, setSuccessfulProvisionCount] =
useState<number>(0); useState<number>(0);
const inputCpuCoresOptions = useMemo(() => {
const result: number[] = [];
for (let i = CPU_CORES_MIN; i <= inputCPUCoresMax; i += 1) {
result.push(i);
}
return result;
}, [inputCPUCoresMax]);
const inputTests: InputTestBatches = { const inputTests: InputTestBatches = {
serverName: { serverName: {
defaults: { defaults: {
@ -1582,38 +1575,43 @@ const ProvisionServerDialog = ({
messageBoxProps={inputServerNameMessage} messageBoxProps={inputServerNameMessage}
/> />
</Box> </Box>
{createOutlinedSlider( <Autocomplete
'ps-cpu-cores', id="ps-cpu-cores"
'CPU cores', disableClearable
inputCPUCoresValue, extendRenderInput={({ inputLabelProps = {} }) => {
{ inputLabelProps.isNotifyRequired = inputCPUCoresValue <= 0;
messageBoxProps: inputCPUCoresMessage, }}
sliderProps: { getOptionLabel={(option) => String(option)}
onChange: (value) => { label="CPU cores"
const newCPUCoresValue = value as number; messageBoxProps={inputCPUCoresMessage}
noOptionsText="No available number of cores."
onChange={(event, value) => {
if (!value || value === inputCPUCoresValue) return;
if (newCPUCoresValue !== inputCPUCoresValue) { setInputCPUCoresValue(value);
setInputCPUCoresValue(newCPUCoresValue);
const { maxCPUCores: newCPUCoresMax } = updateLimits({ const { maxCPUCores: newCPUCoresMax } = updateLimits({
cpuCores: newCPUCoresValue, cpuCores: value,
}); });
testInput({ testInput({
inputs: { inputs: {
cpuCores: { cpuCores: {
max: newCPUCoresMax, max: newCPUCoresMax,
value: newCPUCoresValue, value,
}, },
}, },
}); });
} }}
}, openOnFocus
max: inputCPUCoresMax, options={inputCpuCoresOptions}
min: CPU_CORES_MIN, renderOption={(optionProps, option) => (
}, <li {...optionProps} key={`ps-cpu-cores-${option}`}>
}, {option}
</li>
)} )}
value={inputCPUCoresValue}
/>
<OutlinedLabeledInputWithSelect <OutlinedLabeledInputWithSelect
id="ps-memory" id="ps-memory"
label="Memory" label="Memory"

Loading…
Cancel
Save