misc_pterodactyl-panel/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx

102 lines
4.3 KiB
TypeScript
Raw Normal View History

2021-10-10 19:03:28 +00:00
import { useServerFromRoute } from '@/api/admin/server';
import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
import React from 'react';
import tw from 'twin.macro';
import { object } from 'yup';
import updateServer, { Values } from '@/api/admin/servers/updateServer';
2021-10-10 19:03:28 +00:00
import { Form, Formik, FormikHelpers } from 'formik';
import { useStoreActions } from 'easy-peasy';
import Button from '@/components/elements/Button';
import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox';
2021-10-10 19:03:28 +00:00
import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox';
2021-10-10 19:03:28 +00:00
export default () => {
const { data: server } = useServerFromRoute();
2021-10-10 19:03:28 +00:00
const { clearFlashes, clearAndAddHttpError } = useStoreActions(actions => actions.flashes);
2021-10-10 19:03:28 +00:00
if (!server) return null;
const submit = (values: Values, { setSubmitting, setFieldValue }: FormikHelpers<Values>) => {
clearFlashes('server');
// This value is inverted to have the switch be on when the
// OOM Killer is enabled, rather than when disabled.
values.limits.oomDisabled = !values.limits.oomDisabled;
2021-10-10 19:03:28 +00:00
updateServer(server.id, values)
.then(() => {
2021-10-10 19:03:28 +00:00
// setServer({ ...server, ...s });
// TODO: Figure out how to properly clear react-selects for allocations.
setFieldValue('addAllocations', []);
setFieldValue('removeAllocations', []);
})
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'server', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
externalId: server.externalId || '',
name: server.name,
2021-10-10 19:03:28 +00:00
ownerId: server.userId,
limits: {
memory: server.limits.memory,
swap: server.limits.swap,
disk: server.limits.disk,
io: server.limits.io,
cpu: server.limits.cpu,
threads: server.limits.threads || '',
// This value is inverted to have the switch be on when the
// OOM Killer is enabled, rather than when disabled.
oomDisabled: !server.limits.oomDisabled,
},
featureLimits: {
allocations: server.featureLimits.allocations,
backups: server.featureLimits.backups,
databases: server.featureLimits.databases,
},
allocationId: server.allocationId,
addAllocations: [] as number[],
removeAllocations: [] as number[],
}}
validationSchema={object().shape({})}
>
2021-09-15 17:09:54 +00:00
{({ isSubmitting, isValid }) => (
<Form>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
2021-10-04 00:26:44 +00:00
<div css={tw`grid grid-cols-1 gap-y-6`}>
<BaseSettingsBox/>
<FeatureLimitsBox/>
<NetworkingBox/>
</div>
<div css={tw`flex flex-col`}>
2021-10-10 19:03:28 +00:00
<ServerResourceBox/>
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-5 mt-6`}>
2021-09-15 17:09:54 +00:00
<div css={tw`flex flex-row`}>
2021-10-10 19:03:28 +00:00
<ServerDeleteButton/>
<Button
type="submit"
size="small"
css={tw`ml-auto`}
disabled={isSubmitting || !isValid}
>
2021-09-15 17:09:54 +00:00
Save Changes
</Button>
</div>
</div>
</div>
2021-09-15 17:09:54 +00:00
</div>
</Form>
)}
</Formik>
);
2021-10-10 19:03:28 +00:00
};