seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): show Spinner until provision server data is received

Browse Source
main
Tsu-ba-me 3 years ago
parent 38d8081c72
commit bcfda2e37d
1 changed files with 190 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 371
      striker-ui/components/ProvisionServerDialog.tsx

371
striker-ui/components/ProvisionServerDialog.tsx
Unescape View File

@ -996,6 +996,8 @@ const ProvisionServerDialog = ({
string[] string[]
>([]); >([]);
const [isProvisionServerDataReady, setIsProvisionServerDataReady] =
useState<boolean>(false);
const [isOpenProvisionConfirmDialog, setIsOpenProvisionConfirmDialog] = const [isOpenProvisionConfirmDialog, setIsOpenProvisionConfirmDialog] =
useState<boolean>(false); useState<boolean>(false);
const [isProvisionRequestInProgress, setIsProvisionRequestInProgress] = const [isProvisionRequestInProgress, setIsProvisionRequestInProgress] =
@ -1510,6 +1512,8 @@ const ProvisionServerDialog = ({
}; };
}), }),
); );
setIsProvisionServerDataReady(true);
}); });
}, [initLimits]); }, [initLimits]);
@ -1538,200 +1542,205 @@ const ProvisionServerDialog = ({
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</PanelHeader> </PanelHeader>
<Box {isProvisionServerDataReady ? (
sx={{ <Box
display: 'flex', sx={{
flexDirection: 'column', display: 'flex',
maxHeight: '50vh', flexDirection: 'column',
overflowY: 'scroll', maxHeight: '50vh',
paddingTop: '.6em', overflowY: 'scroll',
paddingTop: '.6em',
'& > :not(:first-child)': {
marginTop: '1em', '& > :not(:first-child)': {
}, marginTop: '1em',
}} },
> }}
<Box sx={{ display: 'flex', flexDirection: 'column' }}> >
<OutlinedInputWithLabel <Box sx={{ display: 'flex', flexDirection: 'column' }}>
id="ps-server-name" <OutlinedInputWithLabel
label="Server name" id="ps-server-name"
inputProps={{ label="Server name"
onChange: ({ target: { value } }) => { inputProps={{
setInputServerNameValue(value); onChange: ({ target: { value } }) => {
setInputServerNameValue(value);
testInput({ inputs: { serverName: { value } } });
}, testInput({ inputs: { serverName: { value } } });
value: inputServerNameValue, },
}} value: inputServerNameValue,
inputLabelProps={{ }}
isNotifyRequired: inputServerNameValue.length === 0, inputLabelProps={{
}} isNotifyRequired: inputServerNameValue.length === 0,
messageBoxProps={inputServerNameMessage} }}
/> messageBoxProps={inputServerNameMessage}
</Box> />
{createOutlinedSlider( </Box>
'ps-cpu-cores', {createOutlinedSlider(
'CPU cores', 'ps-cpu-cores',
inputCPUCoresValue, 'CPU cores',
{ inputCPUCoresValue,
messageBoxProps: inputCPUCoresMessage, {
sliderProps: { messageBoxProps: inputCPUCoresMessage,
onChange: (value) => { sliderProps: {
const newCPUCoresValue = value as number; onChange: (value) => {
const newCPUCoresValue = value as number;
if (newCPUCoresValue !== inputCPUCoresValue) {
setInputCPUCoresValue(newCPUCoresValue); if (newCPUCoresValue !== inputCPUCoresValue) {
setInputCPUCoresValue(newCPUCoresValue);
const { maxCPUCores: newCPUCoresMax } = updateLimits({
cpuCores: newCPUCoresValue, const { maxCPUCores: newCPUCoresMax } = updateLimits({
}); cpuCores: newCPUCoresValue,
});
testInput({
inputs: { testInput({
cpuCores: { inputs: {
max: newCPUCoresMax, cpuCores: {
value: newCPUCoresValue, max: newCPUCoresMax,
value: newCPUCoresValue,
},
}, },
}, });
}); }
} },
max: inputCPUCoresMax,
min: CPU_CORES_MIN,
}, },
max: inputCPUCoresMax,
min: CPU_CORES_MIN,
}, },
}, )}
)} <OutlinedLabeledInputWithSelect
<OutlinedLabeledInputWithSelect id="ps-memory"
id="ps-memory" label="Memory"
label="Memory" messageBoxProps={inputMemoryMessage}
messageBoxProps={inputMemoryMessage} inputWithLabelProps={{
inputWithLabelProps={{ inputProps: {
inputProps: { endAdornment: createMaxValueButton(
endAdornment: createMaxValueButton( `${inputMemoryMax} ${inputMemoryUnit}`,
`${inputMemoryMax} ${inputMemoryUnit}`, {
{ onButtonClick: () => {
onButtonClick: () => { setInputMemoryValue(inputMemoryMax);
setInputMemoryValue(inputMemoryMax); changeMemory({ cmValue: memoryMax });
changeMemory({ cmValue: memoryMax }); },
}, },
),
onChange: ({ target: { value } }) => {
handleInputMemoryValueChange({ value });
}, },
), type: 'number',
onChange: ({ target: { value } }) => { value: inputMemoryValue,
handleInputMemoryValueChange({ value });
}, },
type: 'number', inputLabelProps: {
value: inputMemoryValue, isNotifyRequired: memory === BIGINT_ZERO,
}, },
inputLabelProps: { }}
isNotifyRequired: memory === BIGINT_ZERO, selectItems={DATA_SIZE_UNIT_SELECT_ITEMS}
}, selectWithLabelProps={{
}} selectProps: {
selectItems={DATA_SIZE_UNIT_SELECT_ITEMS} onChange: ({ target: { value } }) => {
selectWithLabelProps={{ const selectedUnit = value as DataSizeUnit;
selectProps: {
handleInputMemoryValueChange({ unit: selectedUnit });
},
value: inputMemoryUnit,
},
}}
/>
{virtualDisks.stateIds.map((vdStateId, vdIndex) =>
createVirtualDiskForm(
virtualDisks,
vdIndex,
setVirtualDisks,
storageGroupSelectItems,
includeStorageGroupUUIDs,
updateLimits,
storageGroupUUIDMapToData,
testInput,
),
)}
<SelectWithLabel
disableItem={(value) => value === inputDriverISOFileUUID}
hideItem={(value) => !includeFileUUIDs.includes(value)}
id="ps-install-image"
inputLabelProps={{
isNotifyRequired: inputInstallISOFileUUID.length === 0,
}}
label="Install ISO"
messageBoxProps={inputInstallISOMessage}
selectItems={fileSelectItems}
selectProps={{
onChange: ({ target: { value } }) => { onChange: ({ target: { value } }) => {
const selectedUnit = value as DataSizeUnit; const newInstallISOFileUUID = value as string;
handleInputMemoryValueChange({ unit: selectedUnit }); handleInputInstallISOFileUUIDChange(newInstallISOFileUUID);
}, },
value: inputMemoryUnit, onClearIndicatorClick: () =>
}, handleInputInstallISOFileUUIDChange(''),
}} value: inputInstallISOFileUUID,
/> }}
{virtualDisks.stateIds.map((vdStateId, vdIndex) => />
createVirtualDiskForm( <SelectWithLabel
virtualDisks, disableItem={(value) => value === inputInstallISOFileUUID}
vdIndex, hideItem={(value) => !includeFileUUIDs.includes(value)}
setVirtualDisks, id="ps-driver-image"
storageGroupSelectItems, label="Driver ISO"
includeStorageGroupUUIDs, messageBoxProps={inputDriverISOMessage}
updateLimits, selectItems={fileSelectItems}
storageGroupUUIDMapToData, selectProps={{
testInput, onChange: ({ target: { value } }) => {
), const newDriverISOFileUUID = value as string;
)}
<SelectWithLabel
disableItem={(value) => value === inputDriverISOFileUUID}
hideItem={(value) => !includeFileUUIDs.includes(value)}
id="ps-install-image"
inputLabelProps={{
isNotifyRequired: inputInstallISOFileUUID.length === 0,
}}
label="Install ISO"
messageBoxProps={inputInstallISOMessage}
selectItems={fileSelectItems}
selectProps={{
onChange: ({ target: { value } }) => {
const newInstallISOFileUUID = value as string;
handleInputInstallISOFileUUIDChange(newInstallISOFileUUID); handleInputDriverISOFileUUIDChange(newDriverISOFileUUID);
}, },
onClearIndicatorClick: () => onClearIndicatorClick: () =>
handleInputInstallISOFileUUIDChange(''), handleInputDriverISOFileUUIDChange(''),
value: inputInstallISOFileUUID, value: inputDriverISOFileUUID,
}} }}
/> />
<SelectWithLabel <SelectWithLabel
disableItem={(value) => value === inputInstallISOFileUUID} disableItem={(value) => !includeAnvilUUIDs.includes(value)}
hideItem={(value) => !includeFileUUIDs.includes(value)} id="ps-anvil"
id="ps-driver-image" inputLabelProps={{
label="Driver ISO" isNotifyRequired: inputAnvilValue.length === 0,
messageBoxProps={inputDriverISOMessage} }}
selectItems={fileSelectItems} label="Anvil node pair"
selectProps={{ messageBoxProps={inputAnvilMessage}
onChange: ({ target: { value } }) => { selectItems={anvilSelectItems}
const newDriverISOFileUUID = value as string; selectProps={{
onChange: ({ target: { value } }) => {
const newAnvilUUID: string = value as string;
handleInputDriverISOFileUUIDChange(newDriverISOFileUUID); handleInputAnvilValueChange(newAnvilUUID);
}, },
onClearIndicatorClick: () => onClearIndicatorClick: () => handleInputAnvilValueChange(''),
handleInputDriverISOFileUUIDChange(''), renderValue: (value) => {
value: inputDriverISOFileUUID, const { anvilName: rvAnvilName = `Unknown ${value}` } =
}} anvilUUIDMapToData[value as string] ?? {};
/>
<SelectWithLabel
disableItem={(value) => !includeAnvilUUIDs.includes(value)}
id="ps-anvil"
inputLabelProps={{
isNotifyRequired: inputAnvilValue.length === 0,
}}
label="Anvil node pair"
messageBoxProps={inputAnvilMessage}
selectItems={anvilSelectItems}
selectProps={{
onChange: ({ target: { value } }) => {
const newAnvilUUID: string = value as string;
handleInputAnvilValueChange(newAnvilUUID); return rvAnvilName;
}, },
onClearIndicatorClick: () => handleInputAnvilValueChange(''), value: inputAnvilValue,
renderValue: (value) => { }}
const { anvilName: rvAnvilName = `Unknown ${value}` } = />
anvilUUIDMapToData[value as string] ?? {}; <Autocomplete
id="ps-optimize-for-os"
extendRenderInput={({ inputLabelProps = {} }) => {
inputLabelProps.isNotifyRequired =
inputOptimizeForOSValue === null;
}}
isOptionEqualToValue={(option, value) => option.key === value.key}
label="Optimize for OS"
messageBoxProps={inputOptimizeForOSMessage}
noOptionsText="No matching OS"
onChange={(event, value) => {
setInputOptimizeForOSValue(value);
}}
openOnFocus
options={osAutocompleteOptions}
value={inputOptimizeForOSValue}
/>
</Box>
) : (
<Spinner />
)}
return rvAnvilName;
},
value: inputAnvilValue,
}}
/>
<Autocomplete
id="ps-optimize-for-os"
extendRenderInput={({ inputLabelProps = {} }) => {
inputLabelProps.isNotifyRequired =
inputOptimizeForOSValue === null;
}}
isOptionEqualToValue={(option, value) => option.key === value.key}
label="Optimize for OS"
messageBoxProps={inputOptimizeForOSMessage}
noOptionsText="No matching OS"
onChange={(event, value) => {
setInputOptimizeForOSValue(value);
}}
openOnFocus
options={osAutocompleteOptions}
value={inputOptimizeForOSValue}
/>
</Box>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',

Write Preview
Loading…
Cancel
Save