ui(admin): add "working" React admin ui
This commit is contained in:
Matthew Penner
parent
d1c7494933
commit
5402584508
199 changed files with 13387 additions and 151 deletions
|
|
@ -0,0 +1,73 @@
|
|||
import type { Actions } from 'easy-peasy';
|
||||
import { useStoreActions } from 'easy-peasy';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import deleteEgg from '@/api/admin/eggs/deleteEgg';
|
||||
import Button from '@/components/elements/Button';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import type { ApplicationStore } from '@/state';
|
||||
|
||||
interface Props {
|
||||
eggId: number;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
export default ({ eggId, onDeleted }: Props) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes,
|
||||
);
|
||||
|
||||
const onDelete = () => {
|
||||
setLoading(true);
|
||||
clearFlashes('egg');
|
||||
|
||||
deleteEgg(eggId)
|
||||
.then(() => {
|
||||
setLoading(false);
|
||||
onDeleted();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
|
||||
setLoading(false);
|
||||
setVisible(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={visible}
|
||||
title={'Delete egg?'}
|
||||
buttonText={'Yes, delete egg'}
|
||||
onConfirmed={onDelete}
|
||||
showSpinnerOverlay={loading}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
>
|
||||
Are you sure you want to delete this egg? You may only delete an egg with no servers using it.
|
||||
</ConfirmationModal>
|
||||
|
||||
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
css={tw`h-5 w-5`}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { exportEgg } from '@/api/admin/egg';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { jsonLanguage } from '@codemirror/lang-json';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default ({ className }: { className?: string }) => {
|
||||
const params = useParams<'id'>();
|
||||
const { clearAndAddHttpError, clearFlashes } = useFlash();
|
||||
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [_content, setContent] = useState<Record<string, any> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearFlashes('egg:export');
|
||||
setLoading(true);
|
||||
|
||||
exportEgg(Number(params.id))
|
||||
.then(setContent)
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg:export', error }))
|
||||
.then(() => setLoading(false));
|
||||
}, [visible]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
visible={visible}
|
||||
onDismissed={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
css={tw`relative`}
|
||||
>
|
||||
<SpinnerOverlay visible={loading} />
|
||||
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Export Egg</h2>
|
||||
<FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
|
||||
|
||||
{/*<Editor*/}
|
||||
{/* overrides={tw`h-[32rem] rounded`}*/}
|
||||
{/* initialContent={content !== null ? JSON.stringify(content, null, '\t') : ''}*/}
|
||||
{/* mode={jsonLanguage}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
isSecondary
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
|
||||
// onClick={submit}
|
||||
// TODO: When clicked, save as a JSON file.
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Button
|
||||
type={'button'}
|
||||
size={'small'}
|
||||
css={tw`px-4 py-0 whitespace-nowrap`}
|
||||
className={className}
|
||||
onClick={() => setVisible(true)}
|
||||
isSecondary
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import updateEgg from '@/api/admin/eggs/updateEgg';
|
||||
import Field from '@/components/elements/Field';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { shell } from '@codemirror/legacy-modes/mode/shell';
|
||||
import { faScroll } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Form, Formik, FormikHelpers } from 'formik';
|
||||
import tw from 'twin.macro';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import Button from '@/components/elements/Button';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
|
||||
interface Values {
|
||||
scriptContainer: string;
|
||||
scriptEntry: string;
|
||||
scriptInstall: string;
|
||||
}
|
||||
|
||||
export default function EggInstallContainer() {
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let fetchFileContent: (() => Promise<string>) | null = null;
|
||||
|
||||
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
if (fetchFileContent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
values.scriptInstall = await fetchFileContent();
|
||||
|
||||
clearFlashes('egg');
|
||||
|
||||
updateEgg(egg.id, values)
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
scriptContainer: egg.scriptContainer,
|
||||
scriptEntry: egg.scriptEntry,
|
||||
scriptInstall: '',
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<AdminBox icon={faScroll} title={'Install Script'} noPadding>
|
||||
<div css={tw`relative pb-4`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Form>
|
||||
{/*<Editor*/}
|
||||
{/* overrides={tw`h-96 mb-4`}*/}
|
||||
{/* initialContent={egg.scriptInstall || ''}*/}
|
||||
{/* mode={shell}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchFileContent = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<div css={tw`mx-6 mb-4`}>
|
||||
<div css={tw`grid grid-cols-3 gap-x-8 gap-y-6`}>
|
||||
<Field
|
||||
id={'scriptContainer'}
|
||||
name={'scriptContainer'}
|
||||
label={'Install Container'}
|
||||
type={'text'}
|
||||
description={'The Docker image to use for running this installation script.'}
|
||||
/>
|
||||
|
||||
<Field
|
||||
id={'scriptEntry'}
|
||||
name={'scriptEntry'}
|
||||
label={'Install Entrypoint'}
|
||||
type={'text'}
|
||||
description={
|
||||
'The command that should be used to run this script inside of the installation container.'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`flex flex-row border-t border-neutral-600`}>
|
||||
<Button
|
||||
type={'submit'}
|
||||
size={'small'}
|
||||
css={tw`ml-auto mr-6 mt-4`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</AdminBox>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
90
resources/scripts/components/admin/nests/eggs/EggRouter.tsx
Normal file
90
resources/scripts/components/admin/nests/eggs/EggRouter.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { useEffect } from 'react';
|
||||
import { Route, Routes, useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import EggInstallContainer from '@/components/admin/nests/eggs/EggInstallContainer';
|
||||
import EggVariablesContainer from '@/components/admin/nests/eggs/EggVariablesContainer';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
|
||||
import EggSettingsContainer from '@/components/admin/nests/eggs/EggSettingsContainer';
|
||||
|
||||
const EggRouter = () => {
|
||||
const { id, nestId } = useParams<'nestId' | 'id'>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: egg, error, isValidating, mutate } = useEggFromRoute();
|
||||
|
||||
useEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) clearFlashes('egg');
|
||||
if (error) clearAndAddHttpError({ key: 'egg', error });
|
||||
}, [error]);
|
||||
|
||||
if (!egg || (error && isValidating)) {
|
||||
return (
|
||||
<AdminContentBlock showFlashKey={'egg'}>
|
||||
<Spinner size={'large'} centered />
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Egg - ' + egg.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-4`}>
|
||||
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
|
||||
{egg.uuid}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'egg'} css={tw`mb-4`} />
|
||||
|
||||
<SubNavigation>
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}`} name={'About'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
|
||||
/>
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/variables`} name={'Variables'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/install`} name={'Install Script'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
||||
/>
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
</SubNavigation>
|
||||
|
||||
<Routes>
|
||||
<Route path="" element={<EggSettingsContainer />} />
|
||||
<Route path="variables" element={<EggVariablesContainer />} />
|
||||
<Route path="install" element={<EggInstallContainer />} />
|
||||
</Routes>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return <EggRouter />;
|
||||
};
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import updateEgg from '@/api/admin/eggs/updateEgg';
|
||||
import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
|
||||
import EggExportButton from '@/components/admin/nests/eggs/EggExportButton';
|
||||
import Button from '@/components/elements/Button';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import Field, { TextareaField } from '@/components/elements/Field';
|
||||
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 { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import { object } from 'yup';
|
||||
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
|
||||
|
||||
export function EggInformationContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
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() {
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggStartupContainer({ className }: { className?: string }) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggImageContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faDocker} title={'Docker'} css={tw`relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<TextareaField id={'dockerImages'} name={'dockerImages'} label={'Docker Images'} rows={5} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggLifecycleContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faFireAlt} title={'Lifecycle'} css={tw`relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Field id={'configStop'} name={'configStop'} label={'Stop Command'} type={'text'} css={tw`mb-1`} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
interface EggProcessContainerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface EggProcessContainerRef {
|
||||
getStartupConfiguration: () => Promise<string | null>;
|
||||
getFilesConfiguration: () => Promise<string | null>;
|
||||
}
|
||||
|
||||
export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(function EggProcessContainer(
|
||||
{ className },
|
||||
ref,
|
||||
) {
|
||||
// const { isSubmitting, values } = useFormikContext<Values>();
|
||||
const { isSubmitting } = useFormikContext<Values>();
|
||||
|
||||
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} />
|
||||
|
||||
<div css={tw`mb-5`}>
|
||||
<Label>Startup Configuration</Label>
|
||||
{/*<Editor*/}
|
||||
{/* mode={jsonLanguage}*/}
|
||||
{/* 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}*/}
|
||||
{/* initialContent={values.configFiles}*/}
|
||||
{/* overrides={tw`h-48 rounded`}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchFilesConfiguration = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</AdminBox>
|
||||
);
|
||||
});
|
||||
|
||||
interface Values {
|
||||
name: string;
|
||||
description: string;
|
||||
startup: string;
|
||||
dockerImages: string;
|
||||
configStop: string;
|
||||
configStartup: string;
|
||||
configFiles: string;
|
||||
}
|
||||
|
||||
export default function EggSettingsContainer() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const ref = useRef<EggProcessContainerRef>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('egg');
|
||||
|
||||
values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
|
||||
values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
|
||||
|
||||
updateEgg(egg.id, {
|
||||
...values,
|
||||
// TODO
|
||||
dockerImages: {},
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: egg.name,
|
||||
description: egg.description || '',
|
||||
startup: egg.startup,
|
||||
// TODO
|
||||
dockerImages: egg.dockerImages.toString(),
|
||||
configStop: egg.configStop || '',
|
||||
configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
|
||||
configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',
|
||||
}}
|
||||
validationSchema={object().shape({})}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Form>
|
||||
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
|
||||
<EggInformationContainer />
|
||||
<EggDetailsContainer />
|
||||
</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 />
|
||||
</div>
|
||||
|
||||
<EggProcessContainer ref={ref} css={tw`mb-6`} />
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mb-16`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<EggDeleteButton eggId={egg.id} onDeleted={() => navigate('/admin/nests')} />
|
||||
<EggExportButton css={tw`ml-auto mr-4`} />
|
||||
<Button type="submit" size="small" disabled={isSubmitting || !isValid}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
import { TrashIcon } from '@heroicons/react/outline';
|
||||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik, useFormikContext } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import { array, boolean, object, string } from 'yup';
|
||||
|
||||
import deleteEggVariable from '@/api/admin/eggs/deleteEggVariable';
|
||||
import updateEggVariables from '@/api/admin/eggs/updateEggVariables';
|
||||
import { NoItems } from '@/components/admin/AdminTable';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import type { EggVariable } from '@/api/admin/egg';
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import NewVariableButton from '@/components/admin/nests/eggs/NewVariableButton';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Checkbox from '@/components/elements/Checkbox';
|
||||
import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
export const validationSchema = object().shape({
|
||||
name: string().required().min(1).max(191),
|
||||
description: string(),
|
||||
environmentVariable: string().required().min(1).max(191),
|
||||
defaultValue: string(),
|
||||
isUserViewable: boolean().required(),
|
||||
isUserEditable: boolean().required(),
|
||||
rules: string().required(),
|
||||
});
|
||||
|
||||
export function EggVariableForm({ prefix }: { prefix: string }) {
|
||||
return (
|
||||
<>
|
||||
<Field id={`${prefix}name`} name={`${prefix}name`} label={'Name'} type={'text'} css={tw`mb-6`} />
|
||||
|
||||
<TextareaField
|
||||
id={`${prefix}description`}
|
||||
name={`${prefix}description`}
|
||||
label={'Description'}
|
||||
rows={3}
|
||||
css={tw`mb-4`}
|
||||
/>
|
||||
|
||||
<FieldRow>
|
||||
<Field
|
||||
id={`${prefix}environmentVariable`}
|
||||
name={`${prefix}environmentVariable`}
|
||||
label={'Environment Variable'}
|
||||
type={'text'}
|
||||
/>
|
||||
|
||||
<Field
|
||||
id={`${prefix}defaultValue`}
|
||||
name={`${prefix}defaultValue`}
|
||||
label={'Default Value'}
|
||||
type={'text'}
|
||||
/>
|
||||
</FieldRow>
|
||||
|
||||
<div css={tw`flex flex-row mb-6`}>
|
||||
<Checkbox id={`${prefix}isUserViewable`} name={`${prefix}isUserViewable`} label={'User Viewable'} />
|
||||
|
||||
<Checkbox
|
||||
id={`${prefix}isUserEditable`}
|
||||
name={`${prefix}isUserEditable`}
|
||||
label={'User Editable'}
|
||||
css={tw`ml-auto`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
id={`${prefix}rules`}
|
||||
name={`${prefix}rules`}
|
||||
label={'Validation Rules'}
|
||||
type={'text'}
|
||||
css={tw`mb-2`}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function EggVariableDeleteButton({ onClick }: { onClick: (success: () => void) => void }) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onDelete = () => {
|
||||
setLoading(true);
|
||||
|
||||
onClick(() => {
|
||||
//setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={visible}
|
||||
title={'Delete variable?'}
|
||||
buttonText={'Yes, delete variable'}
|
||||
onConfirmed={onDelete}
|
||||
showSpinnerOverlay={loading}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
>
|
||||
Are you sure you want to delete this variable? Deleting this variable will delete it from every server
|
||||
using this egg.
|
||||
</ConfirmationModal>
|
||||
|
||||
<button
|
||||
type={'button'}
|
||||
css={tw`ml-auto text-neutral-500 hover:text-neutral-300`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<TrashIcon css={tw`h-5 w-5`} />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function EggVariableBox({
|
||||
onDeleteClick,
|
||||
variable,
|
||||
prefix,
|
||||
}: {
|
||||
onDeleteClick: (success: () => void) => void;
|
||||
variable: EggVariable;
|
||||
prefix: string;
|
||||
}) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox
|
||||
css={tw`relative w-full`}
|
||||
title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}
|
||||
button={<EggVariableDeleteButton onClick={onDeleteClick} />}
|
||||
>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<EggVariableForm prefix={prefix} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EggVariablesContainer() {
|
||||
const { clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg, mutate } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
|
||||
updateEggVariables(egg.id, values)
|
||||
.then(async () => await mutate())
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg', error }))
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={egg.relationships.variables}
|
||||
validationSchema={array().of(validationSchema)}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Form>
|
||||
<div css={tw`flex flex-col mb-16`}>
|
||||
{egg.relationships.variables?.length === 0 ? (
|
||||
<NoItems css={tw`bg-neutral-700 rounded-md shadow-md`} />
|
||||
) : (
|
||||
<div css={tw`grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-x-8 gap-y-6`}>
|
||||
{egg.relationships.variables.map((v, i) => (
|
||||
<EggVariableBox
|
||||
key={i}
|
||||
prefix={`[${i}].`}
|
||||
variable={v}
|
||||
onDeleteClick={success => {
|
||||
deleteEggVariable(egg.id, v.id)
|
||||
.then(async () => {
|
||||
await mutate(egg => ({
|
||||
...egg!,
|
||||
relationships: {
|
||||
...egg!.relationships,
|
||||
variables: egg!.relationships.variables!.filter(
|
||||
v2 => v.id === v2.id,
|
||||
),
|
||||
},
|
||||
}));
|
||||
success();
|
||||
})
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg', error }));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-4 mt-6`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<NewVariableButton />
|
||||
|
||||
<Button
|
||||
type={'submit'}
|
||||
size={'small'}
|
||||
css={tw`ml-auto`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik, useFormikContext } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import type { CreateEggVariable } from '@/api/admin/eggs/createEggVariable';
|
||||
import createEggVariable from '@/api/admin/eggs/createEggVariable';
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import Button from '@/components/elements/Button';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
export default function NewVariableButton() {
|
||||
const { setValues } = useFormikContext();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg, mutate } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = (values: CreateEggVariable, { setSubmitting }: FormikHelpers<CreateEggVariable>) => {
|
||||
clearFlashes('variable:create');
|
||||
|
||||
createEggVariable(egg.id, values)
|
||||
.then(async variable => {
|
||||
setValues([...egg.relationships.variables, variable]);
|
||||
await mutate(egg => ({
|
||||
...egg!,
|
||||
relationships: { ...egg!.relationships, variables: [...egg!.relationships.variables, variable] },
|
||||
}));
|
||||
setVisible(false);
|
||||
})
|
||||
.catch(error => {
|
||||
clearAndAddHttpError({ key: 'variable:create', error });
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: '',
|
||||
description: '',
|
||||
environmentVariable: '',
|
||||
defaultValue: '',
|
||||
isUserViewable: false,
|
||||
isUserEditable: false,
|
||||
rules: '',
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{({ isSubmitting, isValid, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
resetForm();
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'variable:create'} css={tw`mb-6`} />
|
||||
|
||||
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Variable</h2>
|
||||
|
||||
<Form css={tw`m-0`}>
|
||||
<EggVariableForm prefix={''} />
|
||||
|
||||
<div css={tw`flex flex-wrap justify-end mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
isSecondary
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
css={tw`w-full mt-4 sm:w-auto sm:mt-0`}
|
||||
type={'submit'}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Create Variable
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
<Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
|
||||
New Variable
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue