Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): node changes

Browse source
This commit is contained in:
Matthew Penner 2021-03-23 17:47:24 -06:00
parent 7b38f05019
commit 8a24c1a142
11 changed files with 424 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

134
resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
View file

@ -1,27 +1,15 @@
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { number, object } from 'yup';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import updateNode from '@/api/admin/nodes/updateNode';
interface Values {
memory: number;
memoryOverallocate: number;
disk: number;
diskOverallocate: number;
}
import { Form, useFormikContext } from 'formik';
import { Context } from '@/components/admin/nodes/NodeRouter';
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { isSubmitting } = useFormikContext();
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
@ -29,85 +17,51 @@ export default () => {
);
}
const submit = ({ memory, memoryOverallocate, disk, diskOverallocate }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { memory, memoryOverallocate, disk, diskOverallocate })
.then(() => setNode({ ...node, memory, memoryOverallocate, disk, diskOverallocate }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
memory: node.memory,
memoryOverallocate: node.memoryOverallocate,
disk: node.disk,
diskOverallocate: node.diskOverallocate,
}}
validationSchema={object().shape({
memory: number().required(),
memoryOverallocate: number().required(),
disk: number().required(),
diskOverallocate: number().required(),
})}
>
{
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'memory'}
name={'memory'}
label={'Memory'}
type={'number'}
/>
</div>
<Form css={tw`mb-0`}>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'memory'}
name={'memory'}
label={'Memory'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'memoryOverallocate'}
name={'memoryOverallocate'}
label={'Memory Overallocate'}
type={'number'}
/>
</div>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'memoryOverallocate'}
name={'memoryOverallocate'}
label={'Memory Overallocate'}
type={'number'}
/>
</div>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'disk'}
name={'disk'}
label={'Disk'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'disk'}
name={'disk'}
label={'Disk'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'diskOverallocate'}
name={'diskOverallocate'}
label={'Disk Overallocate'}
type={'number'}
/>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'diskOverallocate'}
name={'diskOverallocate'}
label={'Disk Overallocate'}
type={'number'}
/>
</div>
</div>
</Form>
</AdminBox>
);
};