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

ui(admin): tweaks to server management

Browse source
This commit is contained in:
Matthew Penner 2021-08-04 22:16:52 -06:00
parent 4b32828423
commit 00b44bf3bb
No known key found for this signature in database
GPG key ID: 5396CC4C3C1C9704
4 changed files with 143 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ export default ({ selected }: { selected: User | null }) => {
}; };
const getSelectedText = (user: User | null): string => { const getSelectedText = (user: User | null): string => {
return user?.username || ''; return user?.email || '';
}; };
return ( return (
@ -47,7 +47,7 @@ export default ({ selected }: { selected: User | null }) => {
> >
{users?.map(d => ( {users?.map(d => (
<Option key={d.id} selectId={'ownerId'} id={d.id} item={d} active={d.id === user?.id}> <Option key={d.id} selectId={'ownerId'} id={d.id} item={d} active={d.id === user?.id}>
{d.username} {d.email}
</Option> </Option>
))} ))}
</SearchableSelect> </SearchableSelect>

285
resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
View file

@ -19,7 +19,6 @@ interface Values {
uuid: string; uuid: string;
identifier: string; identifier: string;
name: string; name: string;
description: string;
memory: number; memory: number;
swap: number; swap: number;
@ -54,42 +53,37 @@ const ServerFeatureContainer = () => {
<AdminBox title={'Feature Limits'} css={tw`relative w-full`}> <AdminBox title={'Feature Limits'} css={tw`relative w-full`}>
<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={'databases'}
id={'databases'} name={'databases'}
name={'databases'} label={'Database Limit'}
label={'Database Limit'} type={'number'}
type={'number'} description={'The total number of databases a user is allowed to create for this server.'}
description={'The total number of databases a user is allowed to create for this server.'} />
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'allocations'}
name={'allocations'}
label={'Allocation Limit'}
type={'number'}
description={'The total number of allocations a user is allowed to create for this server.'}
/>
</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:mx-4 md:mb-0`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mb-0`}> <Field
<Field id={'allocations'}
id={'backups'} name={'allocations'}
name={'backup'} label={'Allocation Limit'}
label={'Backup Limit'} type={'number'}
type={'number'} description={'The total number of allocations a user is allowed to create for this server.'}
description={'The total number of backups that can be created for this server.'} />
/>
</div>
</div> </div>
</Form> <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'backups'}
name={'backup'}
label={'Backup Limit'}
type={'number'}
description={'The total number of backups that can be created for this server.'}
/>
</div>
</div>
</AdminBox> </AdminBox>
); );
}; };
@ -109,83 +103,80 @@ const ServerResourceContainer = () => {
<AdminBox title={'Resource Management'} css={tw`relative w-full`}> <AdminBox title={'Resource Management'} css={tw`relative w-full`}>
<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={'cpu'}
id={'cpu'} name={'cpu'}
name={'cpu'} label={'CPU Limit'}
label={'CPU Limit'} type={'string'}
type={'string'} description={'Each physical core on the system is considered to be 100%. Setting this value to 0 will allow a server to use CPU time without restrictions.'}
description={'Each physical core on the system is considered to be 100%. Setting this value to 0 will allow a server to use CPU time without restrictions.'} />
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'threads'}
name={'threads'}
label={'CPU Pinning'}
type={'string'}
description={'Advanced: Enter the specific CPU cores that this process can run on, or leave blank to allow all cores. This can be a single number, or a comma seperated list. Example: 0, 0-1,3, or 0,1,3,4.'}
/>
</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={'threads'}
id={'memory'} name={'threads'}
name={'memory'} label={'CPU Pinning'}
label={'Memory Limit'} type={'string'}
type={'number'} description={'Advanced: Enter the specific CPU cores that this process can run on, or leave blank to allow all cores. This can be a single number, or a comma seperated list. Example: 0, 0-1,3, or 0,1,3,4.'}
description={'The maximum amount of memory allowed for this container. Setting this to 0 will allow unlimited memory in a container.'} />
/> </div>
</div> </div>
<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-row`}>
<Field <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
id={'swap'} <Field
name={'swap'} id={'memory'}
label={'Swap Limit'} name={'memory'}
type={'number'} label={'Memory Limit'}
/> type={'number'}
</div> description={'The maximum amount of memory allowed for this container. Setting this to 0 will allow unlimited memory in a container.'}
/>
</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={'swap'}
id={'disk'} name={'swap'}
name={'disk'} label={'Swap Limit'}
label={'Disk Limit'} type={'number'}
type={'number'} />
description={'This server will not be allowed to boot if it is using more than this amount of space. If a server goes over this limit while running it will be safely stopped and locked until enough space is available. Set to 0 to allow unlimited disk usage.'} </div>
/> </div>
</div>
<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-row`}>
<Field <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
id={'io'} <Field
name={'io'} id={'disk'}
label={'Block IO Proportion'} name={'disk'}
type={'number'} label={'Disk Limit'}
description={'Advanced: The IO performance of this server relative to other running containers on the system. Value should be between 10 and 1000.'} type={'number'}
/> description={'This server will not be allowed to boot if it is using more than this amount of space. If a server goes over this limit while running it will be safely stopped and locked until enough space is available. Set to 0 to allow unlimited disk usage.'}
</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
<FormikSwitch id={'io'}
name={'oom'} name={'io'}
label={'Out of Memory Killer'} label={'Block IO Proportion'}
description={'Enabling OOM killer may cause server processes to exit unexpectedly. '} type={'number'}
/> description={'Advanced: The IO performance of this server relative to other running containers on the system. Value should be between 10 and 1000.'}
</div> />
</div> </div>
</div>
</Form> <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mt-6 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
<FormikSwitch
name={'oom'}
label={'Out of Memory Killer'}
description={'Enabling OOM killer may cause server processes to exit unexpectedly. '}
/>
</div>
</div>
</AdminBox> </AdminBox>
); );
}; };
@ -205,42 +196,31 @@ const ServerSettingsContainer = () => {
<AdminBox title={'Settings'} css={tw`relative w-full`}> <AdminBox title={'Settings'} css={tw`relative w-full`}>
<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={'name'}
id={'name'} name={'name'}
name={'name'} label={'Server Name'}
label={'Server Name'} type={'string'}
type={'string'} />
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'externalId'}
name={'externalId'}
label={'External Identifier'}
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
<OwnerSelect selected={null}/> id={'externalId'}
</div> name={'externalId'}
label={'External Identifier'}
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}> type={'number'}
<Field />
id={'description'}
name={'description'}
label={'Server Description'}
type={'string'}
/>
</div>
</div> </div>
</Form> </div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 w-full md:w-1/2 md:flex md:flex-col md:pr-4 md:mb-0`}>
<OwnerSelect selected={null}/>
</div>
</div>
</AdminBox> </AdminBox>
); );
}; };
@ -278,7 +258,6 @@ export default () => {
uuid: server.uuid, uuid: server.uuid,
identifier: server.identifier, identifier: server.identifier,
name: server.name, name: server.name,
description: server.description,
memory: server.limits.memory, memory: server.limits.memory,
swap: server.limits.swap, swap: server.limits.swap,
@ -302,28 +281,30 @@ export default () => {
> >
{ {
({ isSubmitting, isValid }) => ( ({ isSubmitting, isValid }) => (
<div css={tw`flex flex-col lg:flex-row`}> <Form>
<div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}> <div css={tw`flex flex-col lg:flex-row`}>
<div css={tw`flex flex-col w-full mr-0 lg:mr-2`}> <div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}>
<ServerSettingsContainer/> <div css={tw`flex flex-col w-full mr-0 lg:mr-2`}>
<ServerSettingsContainer/>
</div>
<div css={tw`flex flex-col w-full mt-4 mr-0 lg:mr-2`}>
<ServerFeatureContainer/>
</div>
</div> </div>
<div css={tw`flex flex-col w-full mt-4 mr-0 lg:mr-2`}> <div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}>
<ServerFeatureContainer/> <div css={tw`flex flex-col w-full mr-0 lg:mr-2`}>
</div> <ServerResourceContainer/>
</div> </div>
<div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}> <div css={tw`py-2 pr-6 mt-4 rounded shadow-md bg-neutral-700`}>
<div css={tw`flex flex-col w-full mr-0 lg:mr-2`}> <div css={tw`flex flex-row`}>
<ServerResourceContainer/> <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
</div> Save Changes
<div css={tw`py-2 pr-6 mt-4 rounded shadow-md bg-neutral-700`}> </Button>
<div css={tw`flex flex-row`}> </div>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div> </div>
</div> </div>
</div> </div>
</div> </Form>
) )
} }
</Formik> </Formik>

12
resources/scripts/components/admin/servers/ServerStartupContainer.tsx
View file

@ -87,11 +87,13 @@ const ServerServiceContainer = () => {
Nest/Egg Selector HERE Nest/Egg Selector HERE
</div> </div>
<div css={tw`pb-4 mb-6 md:w-full md:flex md:flex-col md:mb-0`}> <div css={tw`pb-4 mb-6 md:w-full md:flex md:flex-col md:mb-0`}>
<FormikSwitch <div css={tw`mt-6 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
name={'oom'} <FormikSwitch
label={'Skip Egg Install Script'} name={'skip_install_script'}
description={'If the selected Egg has an install script attached to it, the script will run during install. If you would like to skip this step, check this box.'} label={'Skip Egg Install Script'}
/> description={'If the selected Egg has an install script attached to it, the script will run during install. If you would like to skip this step, check this box.'}
/>
</div>
</div> </div>
</div> </div>
</Form> </Form>

2
resources/scripts/components/elements/Button.tsx
View file

@ -10,7 +10,7 @@ interface Props {
} }
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>` const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`}; ${tw`relative inline-block rounded p-2 tracking-wide text-sm transition-all duration-150 border`};
& > span { & > span {
${tw`select-none`}; ${tw`select-none`};