sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui(admin): fix node settings button

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 = $this->updateService->handle(
$node, $node,
$request->validated(), $request->validated(),
$request->input('reset_secret'), false,
); );
return $this->fractal->item($node) 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 public function rules(array $rules = null): array
{ {
return collect($rules ?? Node::getRules())->only([ return collect($rules ?? Node::getRules())->only([
'public',
'name', 'name',
'location_id', 'location_id',
'database_host_id',
'fqdn', 'fqdn',
'listen_port_http',
'listen_port_sftp',
'public_port_http',
'public_port_sftp',
'scheme', 'scheme',
'behind_proxy', 'behind_proxy',
'public',
'listen_port_http',
'public_port_http',
'listen_port_sftp',
'public_port_sftp',
'memory', 'memory',
'memory_overallocate', 'memory_overallocate',
'disk', 'disk',
'disk_overallocate', 'disk_overallocate',
'upload_size', 'upload_size',
'daemon_base', 'daemon_base',
])->mapWithKeys(function ($value, $key) { ])->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 tw from 'twin.macro';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
export default () => { export default () => {
const { isSubmitting } = useFormikContext(); const { isSubmitting } = useFormikContext();
@ -12,47 +12,45 @@ export default () => {
<AdminBox title={'Limits'} css={tw`w-full relative`}> <AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/> <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-row mb-6`}> <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}> <Field
<Field id={'memory'}
id={'memory'} name={'memory'}
name={'memory'} label={'Memory'}
label={'Memory'} type={'number'}
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> </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:ml-4 mb-6 md:mb-0`}>
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}> <Field
<Field id={'memoryOverallocate'}
id={'disk'} name={'memoryOverallocate'}
name={'disk'} label={'Memory Overallocate'}
label={'Disk'} type={'number'}
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> </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> </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 tw from 'twin.macro';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
export default () => { export default () => {
const { isSubmitting } = useFormikContext(); const { isSubmitting } = useFormikContext();
@ -12,47 +12,45 @@ export default () => {
<AdminBox title={'Listen'} css={tw`w-full relative`}> <AdminBox title={'Listen'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/> <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-row`}> <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}> <Field
<Field id={'listenPortHTTP'}
id={'listenPortHTTP'} name={'listenPortHTTP'}
name={'listenPortHTTP'} label={'HTTP Listen Port'}
label={'HTTP Listen Port'} type={'number'}
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>
<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:ml-4 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}> <Field
<Field id={'publicPortHTTP'}
id={'listenPortSFTP'} name={'publicPortHTTP'}
name={'listenPortSFTP'} label={'HTTP Public Port'}
label={'SFTP Listen Port'} type={'number'}
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> </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> </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`}> <AdminBox title={'Settings'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/> <SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}> <div css={tw`mb-6`}>
<div css={tw`mb-6`}> <Field
<Field id={'name'}
id={'name'} name={'name'}
name={'name'} label={'Name'}
label={'Name'} type={'text'}
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>
<div css={tw`mb-6`}> <div css={tw`mt-6`}>
<LocationSelect selected={node?.relations.location || null}/> <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>
<div css={tw`mb-6`}> <div css={tw`mt-6`}>
<DatabaseSelect selected={node?.relations.databaseHost || null}/> <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>
</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>
</AdminBox> </AdminBox>
); );
}; };
@ -167,6 +165,7 @@ export default () => {
} }
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => { const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
console.log('submit!');
clearFlashes('node'); clearFlashes('node');
updateNode(node.id, values) updateNode(node.id, values)
@ -216,29 +215,31 @@ export default () => {
> >
{ {
({ isSubmitting, isValid }) => ( ({ isSubmitting, isValid }) => (
<div css={tw`flex flex-col lg:flex-row`}> <Form>
<div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}> <div css={tw`flex flex-col lg:flex-row`}>
<NodeSettingsContainer/> <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
</div> <NodeSettingsContainer/>
<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>
<div css={tw`flex w-full mt-4`}> <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
<NodeLimitContainer/> <div css={tw`flex w-full`}>
</div> <NodeListenContainer/>
</div>
<div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}> <div css={tw`flex w-full mt-4`}>
<div css={tw`flex flex-row`}> <NodeLimitContainer/>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}> </div>
Save Changes
</Button> <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>
</div> </div>
</div> </Form>
) )
} }
</Formik> </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> => { const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
searchUsers({ username: query, email: query }).then((users) => { searchUsers({ username: query, email: query })
setUsers(users); .then((users) => {
return resolve(); setUsers(users);
}).catch(reject); return resolve();
})
.catch(reject);
}); });
}; };