misc_pterodactyl-panel/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx

275 lines
9 KiB
TypeScript
Raw Normal View History

2021-09-18 01:56:44 +00:00
import updateEgg from '@/api/admin/eggs/updateEgg';
import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
import Button from '@/components/elements/Button';
2021-09-17 21:40:17 +00:00
import Editor from '@/components/elements/Editor';
2021-09-18 01:56:44 +00:00
import Field, { TextareaField } from '@/components/elements/Field';
2021-09-17 21:40:17 +00:00
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
import { jsonLanguage } from '@codemirror/lang-json';
import { faDocker } from '@fortawesome/free-brands-svg-icons';
import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import AdminBox from '@/components/admin/AdminBox';
2021-09-17 21:40:17 +00:00
import { Egg } from '@/api/admin/eggs/getEgg';
2021-09-18 01:56:44 +00:00
import { useHistory } from 'react-router-dom';
2021-09-17 21:40:17 +00:00
import tw from 'twin.macro';
import { object } from 'yup';
2021-09-18 01:56:44 +00:00
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
2021-09-17 21:40:17 +00:00
function EggInformationContainer () {
const { isSubmitting } = useFormikContext();
2021-09-17 21:40:17 +00:00
return (
<AdminBox icon={faEgg} title={'Egg Information'} css={tw`relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Field
id={'name'}
name={'name'}
label={'Name'}
type={'text'}
css={tw`mb-6`}
/>
<Field
id={'description'}
name={'description'}
label={'Description'}
type={'text'}
css={tw`mb-2`}
/>
</AdminBox>
);
}
function EggDetailsContainer ({ egg }: { egg: Egg }) {
return (
<AdminBox icon={faEgg} title={'Egg Details'} css={tw`relative`}>
<div css={tw`mb-6`}>
<Label>UUID</Label>
<Input
id={'uuid'}
name={'uuid'}
type={'text'}
value={egg.uuid}
readOnly
/>
</div>
<div css={tw`mb-2`}>
<Label>Author</Label>
<Input
id={'author'}
name={'author'}
type={'text'}
value={egg.author}
readOnly
/>
</div>
</AdminBox>
);
}
function EggStartupContainer ({ className }: { className?: string }) {
const { isSubmitting } = useFormikContext();
return (
2021-09-17 21:40:17 +00:00
<AdminBox icon={faTerminal} title={'Startup Command'} css={tw`relative`} className={className}>
<SpinnerOverlay visible={isSubmitting}/>
<Field
id={'startup'}
name={'startup'}
label={'Startup Command'}
type={'text'}
css={tw`mb-1`}
/>
</AdminBox>
);
}
function EggImageContainer () {
const { isSubmitting } = useFormikContext();
2021-09-17 21:40:17 +00:00
return (
<AdminBox icon={faDocker} title={'Docker'} css={tw`relative`}>
2021-09-17 21:40:17 +00:00
<SpinnerOverlay visible={isSubmitting}/>
2021-09-18 01:56:44 +00:00
<TextareaField
id={'dockerImages'}
name={'dockerImages'}
label={'Docker Images'}
rows={5}
/>
</AdminBox>
);
2021-09-17 21:40:17 +00:00
}
function EggLifecycleContainer () {
2021-09-17 21:40:17 +00:00
const { isSubmitting } = useFormikContext();
return (
<AdminBox icon={faFireAlt} title={'Lifecycle'} css={tw`relative`}>
2021-09-17 21:40:17 +00:00
<SpinnerOverlay visible={isSubmitting}/>
<Field
id={'stopCommand'}
name={'stopCommand'}
label={'Stop Command'}
type={'text'}
css={tw`mb-1`}
/>
</AdminBox>
);
}
interface EggProcessContainerProps {
className?: string;
egg: Egg;
}
2021-09-17 21:40:17 +00:00
interface EggProcessContainerRef {
getStartupConfiguration: () => Promise<string | null>;
getFilesConfiguration: () => Promise<string | null>;
}
2021-09-17 21:40:17 +00:00
const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(
function EggProcessContainer ({ className, egg }, ref) {
const { isSubmitting } = useFormikContext();
2021-09-17 21:40:17 +00:00
let fetchStartupConfiguration: (() => Promise<string>) | null = null;
let fetchFilesConfiguration: (() => Promise<string>) | null = null;
useImperativeHandle<EggProcessContainerRef, EggProcessContainerRef>(ref, () => ({
getStartupConfiguration: async () => {
if (fetchStartupConfiguration === null) {
return new Promise<null>(resolve => resolve(null));
}
return await fetchStartupConfiguration();
},
getFilesConfiguration: async () => {
if (fetchFilesConfiguration === null) {
return new Promise<null>(resolve => resolve(null));
}
return await fetchFilesConfiguration();
},
}));
return (
<AdminBox icon={faMicrochip} title={'Process Configuration'} css={tw`relative`} className={className}>
<SpinnerOverlay visible={isSubmitting}/>
2021-10-03 21:51:35 +00:00
<div css={tw`mb-5`}>
<Label>Startup Configuration</Label>
<Editor
mode={jsonLanguage}
initialContent={JSON.stringify(egg.configStartup, null, '\t') || ''}
overrides={tw`h-32 rounded`}
fetchContent={value => {
fetchStartupConfiguration = value;
}}
/>
</div>
<div css={tw`mb-1`}>
<Label>Configuration Files</Label>
<Editor
mode={jsonLanguage}
initialContent={JSON.stringify(egg.configFiles, null, '\t') || ''}
overrides={tw`h-48 rounded`}
fetchContent={value => {
fetchFilesConfiguration = value;
}}
/>
</div>
</AdminBox>
);
}
);
2021-09-17 21:40:17 +00:00
2021-09-18 01:56:44 +00:00
interface Values {
name: string;
description: string;
startup: string;
dockerImages: string;
stopCommand: string;
configStartup: string;
configFiles: string;
2021-09-18 01:56:44 +00:00
}
2021-09-17 21:40:17 +00:00
export default function EggSettingsContainer ({ egg }: { egg: Egg }) {
2021-09-18 01:56:44 +00:00
const history = useHistory();
const { clearFlashes, clearAndAddHttpError } = useFlash();
2021-09-17 21:40:17 +00:00
const ref = useRef<EggProcessContainerRef>();
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
2021-09-17 21:40:17 +00:00
clearFlashes('egg');
2021-09-18 01:56:44 +00:00
values.configStartup = await ref.current?.getStartupConfiguration() || '';
values.configFiles = await ref.current?.getFilesConfiguration() || '';
2021-09-18 01:56:44 +00:00
updateEgg(egg.id, { ...values, dockerImages: values.dockerImages.split('\n') })
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'egg', error });
})
.then(() => setSubmitting(false));
2021-09-17 21:40:17 +00:00
};
return (
<Formik
onSubmit={submit}
initialValues={{
name: egg.name,
description: egg.description || '',
startup: egg.startup,
2021-09-18 01:56:44 +00:00
dockerImages: egg.dockerImages.join('\n'),
stopCommand: egg.configStop || '',
configStartup: '',
configFiles: '',
2021-09-17 21:40:17 +00:00
}}
validationSchema={object().shape({
})}
>
2021-09-18 01:56:44 +00:00
{({ isSubmitting, isValid }) => (
<Form>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
<EggInformationContainer/>
<EggDetailsContainer egg={egg}/>
</div>
<EggStartupContainer css={tw`mb-6`}/>
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
<EggImageContainer/>
<EggLifecycleContainer/>
2021-09-18 01:56:44 +00:00
</div>
<EggProcessContainer
ref={ref}
egg={egg}
css={tw`mb-6`}
/>
2021-09-18 01:56:44 +00:00
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mb-16`}>
<div css={tw`flex flex-row`}>
<EggDeleteButton
eggId={egg.id}
2021-09-18 18:05:19 +00:00
onDeleted={() => history.push('/admin/nests')}
2021-09-18 01:56:44 +00:00
/>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
</div>
</Form>
)}
2021-09-17 21:40:17 +00:00
</Formik>
);
}