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

ui(admin): allow editing allocations for servers

Browse source
This commit is contained in:
Matthew Penner 2021-09-15 15:37:17 -06:00
parent 656ac62ad2
commit a6ab61adba
No known key found for this signature in database
GPG key ID: 030E4AB751DC756F
13 changed files with 219 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/Http/Controllers/Api/Application/Nodes/AllocationController.php
View file

@ -6,6 +6,8 @@ use Pterodactyl\Models\Node;
use Illuminate\Http\Response;
use Pterodactyl\Models\Allocation;
use Spatie\QueryBuilder\QueryBuilder;
use Spatie\QueryBuilder\AllowedFilter;
use Illuminate\Database\Eloquent\Builder;
use Pterodactyl\Services\Allocations\AssignmentService;
use Pterodactyl\Services\Allocations\AllocationDeletionService;
use Pterodactyl\Exceptions\Http\QueryValueOutOfRangeHttpException;
@ -46,7 +48,16 @@ class AllocationController extends ApplicationApiController
}
$allocations = QueryBuilder::for(Allocation::query()->where('node_id', '=', $node->id))
->allowedFilters(['id', 'ip', 'port', 'alias', 'server_id'])
->allowedFilters([
'id', 'ip', 'port', 'alias',
AllowedFilter::callback('server_id', function (Builder $query, $value) {
if ($value === '0') {
$query->whereNull('server_id');
} else {
$query->where('server_id', '=', $value);
}
}),
])
->allowedSorts(['id', 'ip', 'port', 'server_id'])
->paginate($perPage);

10
app/Http/Requests/Api/Application/Servers/UpdateServerRequest.php
View file

@ -28,6 +28,12 @@ class UpdateServerRequest extends ApplicationApiRequest
'databases' => $rules['database_limit'],
'allocations' => $rules['allocation_limit'],
'backups' => $rules['backup_limit'],
'allocation_id' => 'bail|exists:allocations,id',
'add_allocations' => 'bail|array',
'add_allocations.*' => 'integer',
'remove_allocations' => 'bail|array',
'remove_allocations.*' => 'integer',
];
}
@ -52,6 +58,10 @@ class UpdateServerRequest extends ApplicationApiRequest
'database_limit' => array_get($data, 'databases'),
'allocation_limit' => array_get($data, 'allocations'),
'backup_limit' => array_get($data, 'backups'),
'allocation_id' => array_get($data, 'allocation_id'),
'add_allocations' => array_get($data, 'add_allocations'),
'remove_allocations' => array_get($data, 'remove_allocations'),
];
}
}

2
resources/scripts/api/admin/nodes/allocations/createAllocation.ts
View file

@ -1,5 +1,5 @@
import http from '@/api/http';
import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/allocations/getAllocations';
import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/getAllocations';
export interface Values {
ip: string;

30
resources/scripts/api/admin/nodes/allocations/getAllocations.ts
View file

@ -1,35 +1,9 @@
import { Server, rawDataToServer } from '@/api/admin/servers/getServers';
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/getAllocations';
import http, { getPaginationSet, PaginatedResult } from '@/api/http';
import { useContext } from 'react';
import useSWR from 'swr';
import { createContext } from '@/api/admin';
export interface Allocation {
id: number;
ip: string;
port: number;
alias: string | null;
serverId: number | null;
assigned: boolean;
relations: {
server?: Server;
}
}
export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
id: attributes.id,
ip: attributes.ip,
port: attributes.port,
alias: attributes.ip_alias || null,
serverId: attributes.server_id,
assigned: attributes.assigned,
relations: {
server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
},
});
export interface Filters {
id?: string;
ip?: string;

46
resources/scripts/api/admin/nodes/getAllocations.ts
View file

@ -1,26 +1,50 @@
import http, { FractalResponseData } from '@/api/http';
import { rawDataToServer, Server } from '@/api/admin/servers/getServers';
export interface Allocation {
id: number;
ip: string;
alias: string | null;
port: number;
notes: string | null;
alias: string | null;
serverId: number | null;
assigned: boolean;
relations: {
server?: Server;
}
}
export const rawDataToAllocation = (data: FractalResponseData): Allocation => ({
id: data.attributes.id,
ip: data.attributes.ip,
alias: data.attributes.ip_alias,
port: data.attributes.port,
notes: data.attributes.notes,
assigned: data.attributes.assigned,
export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
id: attributes.id,
ip: attributes.ip,
port: attributes.port,
alias: attributes.ip_alias || null,
serverId: attributes.server_id,
assigned: attributes.assigned,
relations: {
server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
},
});
export default (id: string | number): Promise<Allocation[]> => {
export interface Filters {
ip?: string
/* eslint-disable camelcase */
server_id?: string;
/* eslint-enable camelcase */
}
export default (id: string | number, filters: Filters = {}, include: string[] = []): Promise<Allocation[]> => {
const params = {};
if (filters !== null) {
Object.keys(filters).forEach(key => {
// @ts-ignore
params['filter[' + key + ']'] = filters[key];
});
}
return new Promise((resolve, reject) => {
http.get(`/api/application/nodes/${id}/allocations`)
http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), ...params } })
.then(({ data }) => resolve((data.data || []).map(rawDataToAllocation)))
.catch(reject);
});

5
resources/scripts/api/admin/servers/getServers.ts
View file

@ -1,7 +1,8 @@
import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/getAllocations';
import { useContext } from 'react';
import useSWR from 'swr';
import { createContext } from '@/api/admin';
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
import http, { FractalResponseData, FractalResponseList, getPaginationSet, PaginatedResult } from '@/api/http';
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
import { User, rawDataToUser } from '@/api/admin/users/getUsers';
@ -48,6 +49,7 @@ export interface Server {
updatedAt: Date;
relations: {
allocations?: Allocation[];
egg?: Egg;
node?: Node;
user?: User;
@ -96,6 +98,7 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
updatedAt: new Date(attributes.updated_at),
relations: {
allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToAllocation),
egg: attributes.relationships?.egg?.object === 'egg' ? rawDataToEgg(attributes.relationships.egg as FractalResponseData) : undefined,
node: attributes.relationships?.node?.object === 'node' ? rawDataToNode(attributes.relationships.node as FractalResponseData) : undefined,
user: attributes.relationships?.user?.object === 'user' ? rawDataToUser(attributes.relationships.user as FractalResponseData) : undefined,

4
resources/scripts/api/admin/servers/updateServer.ts
View file

@ -17,6 +17,10 @@ export interface Values {
databases: number;
allocations: number;
backups: number;
allocationId: number;
addAllocations: number[];
removeAllocations: number[];
}
export default (id: number, server: Partial<Values>, include: string[] = []): Promise<Server> => {

2
resources/scripts/components/admin/servers/ServerRouter.tsx
View file

@ -40,7 +40,7 @@ const ServerRouter = () => {
useEffect(() => {
clearFlashes('server');
getServer(Number(match.params?.id), [ 'user' ])
getServer(Number(match.params?.id), [ 'allocations', 'user' ])
.then(server => setServer(server))
.catch(error => {
console.error(error);

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

@ -1,5 +1,9 @@
import getAllocations from '@/api/admin/nodes/getAllocations';
import { Server } from '@/api/admin/servers/getServers';
import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
import Label from '@/components/elements/Label';
import Select from '@/components/elements/Select';
import SelectField, { AsyncSelectField, Option } from '@/components/elements/SelectField';
import { faBalanceScale, faCogs, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
@ -63,7 +67,7 @@ export function ServerResourceContainer () {
const { isSubmitting } = useFormikContext();
return (
<AdminBox icon={faBalanceScale} title={'Resource Management'} css={tw`relative w-full`}>
<AdminBox icon={faBalanceScale} title={'Resources'} css={tw`relative w-full`}>
<SpinnerOverlay visible={isSubmitting}/>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
@ -72,8 +76,8 @@ export function ServerResourceContainer () {
id={'cpu'}
name={'cpu'}
label={'CPU Limit'}
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.'}
type={'text'}
description={'Each thread on the system is considered to be 100%. Setting this value to 0 will allow the server to use CPU time without restriction.'}
/>
</div>
@ -82,8 +86,8 @@ export function ServerResourceContainer () {
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.'}
type={'text'}
description={'Advanced: Enter the specific CPU cores that this server can run on, or leave blank to allow all cores. This can be a single number, and or a comma seperated list, and or a dashed range. Example: 0, 0-1,3, or 0,1,3,4. It is recommended to leave this value blank and let the CPU handle balancing the load.'}
/>
</div>
</div>
@ -132,11 +136,11 @@ export function ServerResourceContainer () {
</div>
<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`}>
<div css={tw`bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
<FormikSwitch
name={'oomKiller'}
label={'Out of Memory Killer'}
description={'Enabling OOM killer may cause server processes to exit unexpectedly.'}
description={'Enabling the Out of Memory Killer may cause server processes to exit unexpectedly.'}
/>
</div>
</div>
@ -157,7 +161,7 @@ export function ServerSettingsContainer ({ server }: { server?: Server }) {
id={'name'}
name={'name'}
label={'Server Name'}
type={'string'}
type={'text'}
/>
</div>
@ -166,7 +170,7 @@ export function ServerSettingsContainer ({ server }: { server?: Server }) {
id={'externalId'}
name={'externalId'}
label={'External Identifier'}
type={'number'}
type={'text'}
/>
</div>
</div>
@ -180,12 +184,52 @@ export function ServerSettingsContainer ({ server }: { server?: Server }) {
);
}
export function ServerAllocationsContainer () {
export function ServerAllocationsContainer ({ server }: { server: Server }) {
const { isSubmitting } = useFormikContext();
const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => {
const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' });
callback(allocations.map(a => {
return { value: a.id.toString(), label: a.ip + ':' + a.port };
}));
};
return (
<AdminBox icon={faNetworkWired} title={'Allocations'} css={tw`relative w-full`}>
<AdminBox icon={faNetworkWired} title={'Networking'} css={tw`relative w-full`}>
<SpinnerOverlay visible={isSubmitting}/>
<div css={tw`mb-6`}>
<Label>Primary Allocation</Label>
<Select
id={'allocationId'}
name={'allocationId'}
>
{server.relations?.allocations?.map(a => (
<option key={a.id} value={a.id}>{a.ip}:{a.port}</option>
))}
</Select>
</div>
<AsyncSelectField
id={'addAllocations'}
name={'addAllocations'}
label={'Add Allocations'}
loadOptions={loadOptions}
isMulti
css={tw`mb-6`}
/>
<SelectField
id={'removeAllocations'}
name={'removeAllocations'}
label={'Remove Allocations'}
options={server.relations?.allocations?.map(a => {
return { value: a.id.toString(), label: a.ip + ':' + a.port };
}) || []}
isMulti
isSearchable
css={tw`mb-2`}
/>
</AdminBox>
);
}
@ -206,11 +250,17 @@ export default function ServerSettingsContainer2 () {
);
}
const submit = (values: Values2, { setSubmitting }: FormikHelpers<Values2>) => {
const submit = (values: Values2, { setSubmitting, setFieldValue }: FormikHelpers<Values2>) => {
clearFlashes('server');
updateServer(server.id, { ...values, oomDisabled: !values.oomKiller })
.then(() => setServer({ ...server, ...values }))
updateServer(server.id, { ...values, oomDisabled: !values.oomKiller }, [ 'allocations', 'user' ])
.then(s => {
setServer({ ...server, ...s });
// TODO: Figure out how to properly clear react-selects for allocations.
setFieldValue('addAllocations', []);
setFieldValue('removeAllocations', []);
})
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'server', error });
@ -239,6 +289,10 @@ export default function ServerSettingsContainer2 () {
databases: server.featureLimits.databases,
allocations: server.featureLimits.allocations,
backups: server.featureLimits.backups,
allocationId: server.allocationId,
addAllocations: [] as number[],
removeAllocations: [] as number[],
}}
validationSchema={object().shape({
})}
@ -256,7 +310,7 @@ export default function ServerSettingsContainer2 () {
</div>
<div css={tw`flex mb-6`}>
<ServerAllocationsContainer/>
<ServerAllocationsContainer server={server}/>
</div>
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>

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

@ -1,4 +1,3 @@
import { Egg } from '@/api/admin/eggs/getEgg';
import EggSelect from '@/components/admin/servers/EggSelect';
import NestSelect from '@/components/admin/servers/NestSelect';
import FormikSwitch from '@/components/elements/FormikSwitch';
@ -107,7 +106,7 @@ function ServerImageContainer () {
export default function ServerStartupContainer () {
const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const [ egg, setEgg ] = useState<Egg | null>(null);
// const [ egg, setEgg ] = useState<Egg | null>(null);
const server = Context.useStoreState(state => state.server);

6
resources/scripts/components/elements/Field.tsx
View file

@ -3,6 +3,7 @@ import { Field as FormikField, FieldProps } from 'formik';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import InputError from '@/components/elements/InputError';
import tw from 'twin.macro';
interface OwnProps {
name: string;
@ -20,7 +21,10 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
({ field, form: { errors, touched } }: FieldProps) => (
<div>
{label &&
<Label htmlFor={id} isLight={light}>{label}</Label>
<div css={tw`flex flex-row`} title={description}>
<Label htmlFor={id} isLight={light}>{label}</Label>
{/*{description && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" css={tw`h-4 w-4 ml-1 cursor-pointer`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>}*/}
</div>
}
<Input
id={id}

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

@ -5,7 +5,7 @@ interface Props {
}
const Select = styled.select<Props>`
${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
${tw`shadow-none block p-3 pr-8 rounded border-2 w-full text-sm transition-colors duration-150 ease-linear`};
&, &:hover:not(:disabled), &:focus {
${tw`outline-none`};

96
resources/scripts/components/elements/SelectField.tsx
View file

@ -2,6 +2,7 @@ import { CSSObject } from '@emotion/serialize';
import { Field as FormikField, FieldProps } from 'formik';
import React, { forwardRef } from 'react';
import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
import Async from 'react-select/async';
import Creatable from 'react-select/creatable';
import tw, { theme } from 'twin.macro';
import Label from '@/components/elements/Label';
@ -219,7 +220,7 @@ export interface Option {
label: string;
}
interface Props {
interface SelectFieldProps {
id?: string;
name: string;
label?: string;
@ -242,26 +243,24 @@ interface Props {
className?: string;
}
const SelectField = forwardRef<HTMLElement, Props>(({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) => {
const { options } = props;
const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
function Select2 ({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) {
const { options } = props;
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => o.value));
return;
}
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => o.value));
return;
}
setFieldValue(name, (options as Option).value);
};
setFieldValue(name, (options as Option).value);
};
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{
({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label &&
<Label htmlFor={id}>{label}</Label>
}
{label && <Label htmlFor={id}>{label}</Label>}
{isCreatable ?
<Creatable
{...field}
@ -291,11 +290,64 @@ const SelectField = forwardRef<HTMLElement, Props>(({ id, name, label, descripti
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
</div>
)
)}
</FormikField>
);
}
);
interface AsyncSelectFieldProps {
id?: string;
name: string;
label?: string;
description?: string;
placeholder?: string;
validate?: (value: any) => undefined | string | Promise<any>;
isMulti?: boolean;
className?: string;
loadOptions(inputValue: string, callback: (options: Array<Option>) => void): void;
}
const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
function AsyncSelect2 ({ id, name, label, description, validate, className, isMulti, ...props }, ref) {
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => Number(o.value)));
return;
}
</FormikField>
);
});
SelectField.displayName = 'SelectField';
setFieldValue(name, Number((options as Option).value));
};
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
<Async
{...props}
id={id}
name={name}
styles={SelectStyle}
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
{touched[field.name] && errors[field.name] ?
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
</div>
)}
</FormikField>
);
}
);
export default SelectField;
export { AsyncSelectField };