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

284 lines
9.2 KiB
TypeScript
Raw Normal View History

2021-11-04 20:32:42 +00:00
import { useEggFromRoute } from '@/api/admin/egg';
2021-09-18 01:56:44 +00:00
import updateEgg from '@/api/admin/eggs/updateEgg';
import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
2021-10-30 20:23:29 +00:00
import EggExportButton from '@/components/admin/nests/eggs/EggExportButton';
2021-09-18 01:56:44 +00:00
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-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-10-23 19:13:25 +00:00
export function EggInformationContainer () {
2021-09-17 21:40:17 +00:00
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>
);
}
2021-11-04 20:32:42 +00:00
function EggDetailsContainer () {
const { data: egg } = useEggFromRoute();
if (!egg) {
return null;
}
2021-09-17 21:40:17 +00:00
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>
);
}
2021-10-23 19:13:25 +00:00
export function EggStartupContainer ({ className }: { className?: string }) {
2021-09-17 21:40:17 +00:00
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>
);
}
2021-10-23 19:13:25 +00:00
export function EggImageContainer () {
2021-09-17 21:40:17 +00:00
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
}
2021-10-23 19:13:25 +00:00
export 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
2021-10-23 19:13:25 +00:00
id={'configStop'}
name={'configStop'}
2021-09-17 21:40:17 +00:00
label={'Stop Command'}
type={'text'}
css={tw`mb-1`}
/>
</AdminBox>
);
}
interface EggProcessContainerProps {
className?: string;
}
2021-09-17 21:40:17 +00:00
2021-10-23 19:13:25 +00:00
export interface EggProcessContainerRef {
getStartupConfiguration: () => Promise<string | null>;
getFilesConfiguration: () => Promise<string | null>;
}
2021-09-17 21:40:17 +00:00
2021-10-23 19:13:25 +00:00
export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(
function EggProcessContainer ({ className }, ref) {
const { isSubmitting, values } = useFormikContext<Values>();
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}
2021-10-23 19:13:25 +00:00
initialContent={values.configStartup}
overrides={tw`h-32 rounded`}
fetchContent={value => {
fetchStartupConfiguration = value;
}}
/>
</div>
<div css={tw`mb-1`}>
<Label>Configuration Files</Label>
<Editor
mode={jsonLanguage}
2021-10-23 19:13:25 +00:00
initialContent={values.configFiles}
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;
2021-10-23 19:13:25 +00:00
configStop: string;
configStartup: string;
configFiles: string;
2021-09-18 01:56:44 +00:00
}
2021-11-04 20:32:42 +00:00
export default function EggSettingsContainer () {
2021-09-18 01:56:44 +00:00
const history = useHistory();
2021-11-04 20:32:42 +00:00
const ref = useRef<EggProcessContainerRef>();
2021-09-18 01:56:44 +00:00
const { clearFlashes, clearAndAddHttpError } = useFlash();
2021-09-17 21:40:17 +00:00
2021-11-04 20:32:42 +00:00
const { data: egg } = useEggFromRoute();
if (!egg) {
return null;
}
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'),
2021-10-23 19:13:25 +00:00
configStop: egg.configStop || '',
configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',
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/>
2021-11-04 20:32:42 +00:00
<EggDetailsContainer/>
2021-09-18 01:56:44 +00:00
</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>
2021-10-23 19:13:25 +00:00
<EggProcessContainer ref={ref} css={tw`mb-6`}/>
2021-09-18 01:56:44 +00:00
2021-10-30 19:12:02 +00:00
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mb-16`}>
2021-09-18 01:56:44 +00:00
<div css={tw`flex flex-row`}>
<EggDeleteButton
eggId={egg.id}
onDeleted={() => history.push('/admin/nests')}
2021-09-18 01:56:44 +00:00
/>
2021-10-30 20:23:29 +00:00
<EggExportButton css={tw`ml-auto mr-4`}/>
<Button type="submit" size="small" disabled={isSubmitting || !isValid}>
2021-09-18 01:56:44 +00:00
Save Changes
</Button>
</div>
</div>
</Form>
)}
2021-09-17 21:40:17 +00:00
</Formik>
);
}