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

ui(admin): fix node settings button

Browse source
This commit is contained in:
Matthew Penner 2021-08-02 10:23:58 -06:00
parent 0313bdb1cb
commit fffe3a7f8b
6 changed files with 202 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Controllers/Api/Application/Nodes/NodeController.php
View file

@ -108,7 +108,7 @@ class NodeController extends ApplicationApiController
$node = $this->updateService->handle(
$node,
$request->validated(),
$request->input('reset_secret'),
false,
);
return $this->fractal->item($node)

14
app/Http/Requests/Api/Application/Nodes/StoreNodeRequest.php
View file

@ -17,20 +17,24 @@ class StoreNodeRequest extends ApplicationApiRequest
public function rules(array $rules = null): array
{
return collect($rules ?? Node::getRules())->only([
'public',
'name',
'location_id',
'database_host_id',
'fqdn',
'listen_port_http',
'listen_port_sftp',
'public_port_http',
'public_port_sftp',
'scheme',
'behind_proxy',
'public',
'listen_port_http',
'public_port_http',
'listen_port_sftp',
'public_port_sftp',
'memory',
'memory_overallocate',
'disk',
'disk_overallocate',
'upload_size',
'daemon_base',
])->mapWithKeys(function ($value, $key) {

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

@ -3,7 +3,7 @@ import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, useFormikContext } from 'formik';
import { useFormikContext } from 'formik';
export default () => {
const { isSubmitting } = useFormikContext();
@ -12,47 +12,45 @@ export default () => {
<AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'memory'}
name={'memory'}
label={'Memory'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'memoryOverallocate'}
name={'memoryOverallocate'}
label={'Memory Overallocate'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'memory'}
name={'memory'}
label={'Memory'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'disk'}
name={'disk'}
label={'Disk'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'diskOverallocate'}
name={'diskOverallocate'}
label={'Disk Overallocate'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'memoryOverallocate'}
name={'memoryOverallocate'}
label={'Memory Overallocate'}
type={'number'}
/>
</div>
</Form>
</div>
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<Field
id={'disk'}
name={'disk'}
label={'Disk'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'diskOverallocate'}
name={'diskOverallocate'}
label={'Disk Overallocate'}
type={'number'}
/>
</div>
</div>
</AdminBox>
);
};

76
resources/scripts/components/admin/nodes/NodeListenContainer.tsx
View file

@ -3,7 +3,7 @@ import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, useFormikContext } from 'formik';
import { useFormikContext } from 'formik';
export default () => {
const { isSubmitting } = useFormikContext();
@ -12,47 +12,45 @@ export default () => {
<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 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-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 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>
</Form>
</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>
</AdminBox>
);
};

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

@ -51,105 +51,103 @@ const NodeSettingsContainer = () => {
<AdminBox title={'Settings'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
<div css={tw`mb-6`}>
<Field
id={'name'}
name={'name'}
label={'Name'}
type={'text'}
/>
<div css={tw`mb-6`}>
<Field
id={'name'}
name={'name'}
label={'Name'}
type={'text'}
/>
</div>
<div css={tw`mb-6`}>
<LocationSelect selected={node?.relations.location || null}/>
</div>
<div css={tw`mb-6`}>
<DatabaseSelect selected={node?.relations.databaseHost || null}/>
</div>
<div css={tw`mb-6`}>
<Field
id={'fqdn'}
name={'fqdn'}
label={'FQDN'}
type={'text'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'scheme'}>SSL</Label>
<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`}>
<LocationSelect selected={node?.relations.location || null}/>
<div css={tw`mt-6`}>
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>No</span>
</label>
<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>
<div css={tw`mb-6`}>
<DatabaseSelect selected={node?.relations.databaseHost || null}/>
<div css={tw`mt-6`}>
<Label htmlFor={'public'}>Automatic Allocation</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'public'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'public'}
type={'radio'}
value
/>
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
</label>
</div>
<div css={tw`mb-6`}>
<Field
id={'fqdn'}
name={'fqdn'}
label={'FQDN'}
type={'text'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'scheme'}>SSL</Label>
<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`mt-6`}>
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>No</span>
</label>
<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>
<div css={tw`mt-6`}>
<Label htmlFor={'public'}>Automatic Allocation</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'public'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'public'}
type={'radio'}
value
/>
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
</label>
</div>
</div>
</Form>
</div>
</AdminBox>
);
};
@ -167,6 +165,7 @@ export default () => {
}
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
console.log('submit!');
clearFlashes('node');
updateNode(node.id, values)
@ -216,29 +215,31 @@ export default () => {
>
{
({ isSubmitting, isValid }) => (
<div css={tw`flex flex-col lg:flex-row`}>
<div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
<NodeSettingsContainer/>
</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/>
<Form>
<div css={tw`flex flex-col lg:flex-row`}>
<div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
<NodeSettingsContainer/>
</div>
<div css={tw`flex w-full mt-4`}>
<NodeLimitContainer/>
</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`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
<div css={tw`flex flex-row`}>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
<div css={tw`flex w-full mt-4`}>
<NodeLimitContainer/>
</div>
<div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
<div css={tw`flex flex-row`}>
<Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
</div>
</div>
</div>
</div>
</Form>
)
}
</Formik>

10
resources/scripts/components/admin/servers/OwnerSelect.tsx
View file

@ -12,10 +12,12 @@ export default ({ selected }: { selected: User | null }) => {
const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => {
searchUsers({ username: query, email: query }).then((users) => {
setUsers(users);
return resolve();
}).catch(reject);
searchUsers({ username: query, email: query })
.then((users) => {
setUsers(users);
return resolve();
})
.catch(reject);
});
};