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

ui(admin): work on Node editing

Browse source
This commit is contained in:
Matthew Penner 2021-03-12 14:12:45 -07:00
parent 59e5017fd8
commit 7e8cb52d88
4 changed files with 171 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/scripts/components/admin/nodes/NodeEditContainer.tsx
View file

@ -1,4 +1,3 @@
import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import tw from 'twin.macro';
@ -14,6 +13,8 @@ import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigati
import AdminBox from '@/components/admin/AdminBox';
import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
interface ctx {
node: Node | undefined;
@ -72,7 +73,7 @@ const NodeEditContainer = () => {
return (
<AdminContentBlock title={'Node - ' + node.name}>
<div css={tw`w-full flex flex-row items-center mb-6`}>
<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`}>{node.name}</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{node.uuid}</p>
@ -116,7 +117,7 @@ const NodeEditContainer = () => {
<Switch location={location}>
<Route path={`${match.path}`} exact>
<AdminBox title={'Node Information'}>
<p>Version <Code>1.2.2</Code></p>
<p>Version <Code>1.3.1</Code></p>
</AdminBox>
</Route>
@ -127,9 +128,15 @@ const NodeEditContainer = () => {
</div>
<div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
<div css={tw`flex w-full`}>
<NodeListenContainer/>
</div>
<div css={tw`flex w-full mt-4`}>
<NodeLimitContainer/>
</div>
</div>
</div>
</Route>
<Route path={`${match.path}/configuration`} exact>

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

@ -2,7 +2,6 @@ import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { number, object } from 'yup';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
@ -59,9 +58,9 @@ export default () => {
})}
>
{
({ isSubmitting, isValid }) => (
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Limits'} css={tw`relative`}>
<AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
@ -104,14 +103,6 @@ export default () => {
/>
</div>
</div>
<div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>

109
resources/scripts/components/admin/nodes/NodeListenContainer.tsx Normal file
View file

@ -0,0 +1,109 @@
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { 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 {
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
}
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
<></>
);
}
const submit = ({ listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
}}
validationSchema={object().shape({
})}
>
{
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Listen'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortHTTP'}
name={'listenPortHTTP'}
label={'HTTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortHTTP'}
name={'publicPortHTTP'}
label={'HTTP Public Port'}
type={'number'}
/>
</div>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortSFTP'}
name={'listenPortSFTP'}
label={'SFTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortSFTP'}
name={'publicPortSFTP'}
label={'SFTP Public Port'}
type={'number'}
/>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};

100
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View file

@ -1,17 +1,17 @@
import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { object, string } from 'yup';
import updateNode from '@/api/admin/nodes/updateNode';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import LocationSelect from '@/components/admin/nodes/LocationSelect';
import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
import Label from '@/components/elements/Label';
interface Values {
public: boolean;
@ -20,11 +20,8 @@ interface Values {
locationId: number;
databaseHostId: number | null;
fqdn: string;
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
scheme: string;
behindProxy: boolean;
}
export default () => {
@ -39,11 +36,11 @@ export default () => {
);
}
const submit = ({ name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, scheme, behindProxy })
.then(() => setNode({ ...node, name, description, locationId, fqdn, scheme, behindProxy }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
@ -61,11 +58,8 @@ export default () => {
locationId: node.locationId,
databaseHostId: node.databaseHostId,
fqdn: node.fqdn,
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
scheme: node.scheme,
behindProxy: node.behindProxy,
}}
validationSchema={object().shape({
name: string().required().max(191),
@ -73,9 +67,9 @@ export default () => {
})}
>
{
({ isSubmitting, isValid }) => (
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Settings'} css={tw`relative`}>
<AdminBox title={'Settings'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
@ -114,51 +108,51 @@ export default () => {
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortHTTP'}
name={'listenPortHTTP'}
label={'HTTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'scheme'}>SSL</Label>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortHTTP'}
name={'publicPortHTTP'}
label={'HTTP Public Port'}
type={'number'}
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'scheme'}
type={'radio'}
value={'https'}
/>
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'scheme'}
type={'radio'}
value={'http'}
/>
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
</label>
</div>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortSFTP'}
name={'listenPortSFTP'}
label={'SFTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortSFTP'}
name={'publicPortSFTP'}
label={'SFTP Public Port'}
type={'number'}
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value={false}
/>
</div>
</div>
<span css={tw`text-neutral-300 ml-2`}>No</span>
</label>
<div css={tw`flex flex-row items-center w-full`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value
/>
<span css={tw`text-neutral-300 ml-2`}>Yes</span>
</label>
</div>
</div>
</Form>