ui(admin): add allocation table, implement allocation creator

2021-09-12 19:40:10 -06:00 · 2021-09-12 19:40:10 -06:00 · 3c01dbbcc5
commit 3c01dbbcc5
parent 6b746440fc
14 changed files with 397 additions and 87 deletions
--- a/app/Http/Controllers/Api/Application/Nodes/AllocationController.php
+++ b/app/Http/Controllers/Api/Application/Nodes/AllocationController.php
@ -5,6 +5,7 @@ namespace Pterodactyl\Http\Controllers\Api\Application\Nodes;
 use Pterodactyl\Models\Node;
 use Illuminate\Http\Response;
 use Pterodactyl\Models\Allocation;
+use Spatie\QueryBuilder\QueryBuilder;
 use Pterodactyl\Services\Allocations\AssignmentService;
 use Pterodactyl\Services\Allocations\AllocationDeletionService;
 use Pterodactyl\Exceptions\Http\QueryValueOutOfRangeHttpException;
@ -44,7 +45,10 @@ class AllocationController extends ApplicationApiController
            throw new QueryValueOutOfRangeHttpException('per_page', 1, 100);
        }

-        $allocations = $node->allocations()->paginate($perPage);
+        $allocations = QueryBuilder::for(Allocation::query()->where('node_id', '=', $node->id))
+            ->allowedFilters(['id', 'ip', 'port', 'alias', 'server_id'])
+            ->allowedSorts(['id', 'ip', 'port', 'server_id'])
+            ->paginate($perPage);

        return $this->fractal->collection($allocations)
            ->transformWith(AllocationTransformer::class)
--- a/app/Transformers/Api/Application/AllocationTransformer.php
+++ b/app/Transformers/Api/Application/AllocationTransformer.php
@ -28,6 +28,7 @@ class AllocationTransformer extends Transformer
            'alias' => $model->ip_alias,
            'port' => $model->port,
            'notes' => $model->notes,
+            'server_id' => $model->server_id,
            'assigned' => !is_null($model->server_id),
        ];
    }
--- a/package.json
+++ b/package.json
@ -75,7 +75,7 @@
        "sockette": "^2.0.6",
        "styled-components": "^5.3.1",
        "styled-components-breakpoint": "^3.0.0-preview.20",
-        "swr": "^1.0.0",
+        "swr": "^1.0.1",
        "uuid": "^3.4.0",
        "xterm": "^4.13.0",
        "xterm-addon-attach": "^0.6.0",
--- a/resources/scripts/api/admin/nodes/allocations/createAllocation.ts
+++ b/resources/scripts/api/admin/nodes/allocations/createAllocation.ts
@ -0,0 +1,16 @@
+import http from '@/api/http';
+import { Allocation, rawDataToAllocation } from '@/api/admin/nodes/allocations/getAllocations';
+
+export interface Values {
+    ip: string;
+    ports: number[];
+    alias?: string;
+}
+
+export default (id: string | number, values: Values, include: string[] = []): Promise<Allocation[]> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/application/nodes/${id}/allocations`, values, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve((data || []).map(rawDataToAllocation)))
+            .catch(reject);
+    });
+};
--- a/resources/scripts/api/admin/nodes/allocations/getAllocations.ts
+++ b/resources/scripts/api/admin/nodes/allocations/getAllocations.ts
@ -0,0 +1,65 @@
+import { Server, rawDataToServer } from '@/api/admin/servers/getServers';
+import http, { FractalResponseData, 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;
+    port?: string;
+}
+
+export const Context = createContext<Filters>();
+
+export default (id: string | number, include: string[] = []) => {
+    const { page, filters, sort, sortDirection } = useContext(Context);
+
+    const params = {};
+    if (filters !== null) {
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
+        });
+    }
+
+    if (sort !== null) {
+        // @ts-ignore
+        params.sort = (sortDirection ? '-' : '') + sort;
+    }
+
+    return useSWR<PaginatedResult<Allocation>>([ 'allocations', page, filters, sort, sortDirection ], async () => {
+        const { data } = await http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), page, ...params } });
+
+        return ({
+            items: (data.data || []).map(rawDataToAllocation),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};
--- a/resources/scripts/api/admin/servers/getServers.ts
+++ b/resources/scripts/api/admin/servers/getServers.ts
@ -47,9 +47,9 @@ export interface Server {
    updatedAt: Date;

    relations: {
-        egg: Egg | undefined;
-        node: Node | undefined;
-        user: User | undefined;
+        egg?: Egg;
+        node?: Node;
+        user?: User;
    }
 }

@ -94,11 +94,11 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
    updatedAt: new Date(attributes.updated_at),

    relations: {
-        egg: attributes.relationships?.egg !== undefined ? rawDataToEgg(attributes.relationships.egg as FractalResponseData) : undefined,
-        node: attributes.relationships?.node !== undefined ? rawDataToNode(attributes.relationships.node as FractalResponseData) : undefined,
-        user: attributes.relationships?.user !== undefined ? rawDataToUser(attributes.relationships.user as FractalResponseData) : undefined,
+        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,
    },
-});
+}) as Server;

 export interface Filters {
    id?: string;
--- a/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
@ -1,14 +1,27 @@
+import AllocationTable from '@/components/admin/nodes/allocations/AllocationTable';
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import AdminBox from '@/components/admin/AdminBox';
-import CreateAllocationForm from '@/components/admin/nodes/CreateAllocationForm';
+import CreateAllocationForm from '@/components/admin/nodes/allocations/CreateAllocationForm';
+import tw from 'twin.macro';

 export default () => {
    const match = useRouteMatch<{ id: string }>();

    return (
-        <AdminBox title={'Allocations'}>
+        <>
+            <div css={tw`w-full grid grid-cols-12 gap-x-8`}>
+                <div css={tw`w-full flex col-span-8`}>
+                    <AllocationTable nodeId={match.params.id}/>
+                </div>
+
+                <div css={tw`w-full flex col-span-4`}>
+                    <AdminBox icon={faNetworkWired} title={'Allocations'} css={tw`h-auto w-full`}>
                        <CreateAllocationForm nodeId={match.params.id}/>
                    </AdminBox>
+                </div>
+            </div>
+        </>
    );
 };
--- a/resources/scripts/components/admin/nodes/allocations/AllocationTable.tsx
+++ b/resources/scripts/components/admin/nodes/allocations/AllocationTable.tsx
@ -0,0 +1,160 @@
+import { AdminContext } from '@/state/admin';
+import React, { useContext, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import tw from 'twin.macro';
+import getAllocations, { Context as AllocationsContext, Filters } from '@/api/admin/nodes/allocations/getAllocations';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader, useTableHooks } from '@/components/admin/AdminTable';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import useFlash from '@/plugins/useFlash';
+
+function RowCheckbox ({ id }: { id: number }) {
+    const isChecked = AdminContext.useStoreState(state => state.allocations.selectedAllocations.indexOf(id) >= 0);
+    const appendSelectedAllocation = AdminContext.useStoreActions(actions => actions.allocations.appendSelectedAllocation);
+    const removeSelectedAllocation = AdminContext.useStoreActions(actions => actions.allocations.removeSelectedAllocation);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedAllocation(id);
+                } else {
+                    removeSelectedAllocation(id);
+                }
+            }}
+        />
+    );
+}
+
+interface Props {
+    nodeId: string;
+    filters?: Filters;
+}
+
+function AllocationsTable ({ nodeId, filters }: Props) {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(AllocationsContext);
+    const { data: allocations, error, isValidating } = getAllocations(nodeId, [ 'server' ]);
+
+    const length = allocations?.items?.length || 0;
+
+    const setSelectedAllocations = AdminContext.useStoreActions(actions => actions.allocations.setSelectedAllocations);
+    const selectedAllocationLength = AdminContext.useStoreState(state => state.allocations.selectedAllocations.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedAllocations(e.currentTarget.checked ? (allocations?.items?.map?.(allocation => allocation.id) || []) : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve) => {
+            if (query.length < 2) {
+                setFilters(filters || null);
+            } else {
+                setFilters({ ...filters, ip: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedAllocations([]);
+    }, [ page ]);
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('allocations');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'allocations', error });
+    }, [ error ]);
+
+    return (
+        <AdminTable>
+            <ContentWrapper
+                checked={selectedAllocationLength === (length === 0 ? -1 : length)}
+                onSelectAllClick={onSelectAllClick}
+                onSearch={onSearch}
+            >
+                <Pagination data={allocations} onPageSelect={setPage}>
+                    <div css={tw`overflow-x-auto`}>
+                        <table css={tw`w-full table-auto`}>
+                            <TableHead>
+                                <TableHeader name={'IP Address'} direction={sort === 'ip' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('ip')}/>
+                                <TableHeader name={'Alias'}/>
+                                <TableHeader name={'Port'} direction={sort === 'port' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('port')}/>
+                                <TableHeader name={'Assigned To'}/>
+                            </TableHead>
+
+                            <TableBody>
+                                { allocations !== undefined && !error && !isValidating && length > 0 &&
+                                allocations.items.map(allocation => (
+                                    <tr key={allocation.id} css={tw`h-10 hover:bg-neutral-600`}>
+                                        <td css={tw`pl-6`}>
+                                            <RowCheckbox id={allocation.id}/>
+                                        </td>
+
+                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                            <CopyOnClick text={allocation.ip}>
+                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{allocation.ip}</code>
+                                            </CopyOnClick>
+                                        </td>
+
+                                        {allocation.alias !== null ?
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <CopyOnClick text={allocation.alias}>
+                                                    <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{allocation.alias}</code>
+                                                </CopyOnClick>
+                                            </td>
+                                            :
+                                            <td/>
+                                        }
+
+                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                            <CopyOnClick text={allocation.port}>
+                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{allocation.port}</code>
+                                            </CopyOnClick>
+                                        </td>
+
+                                        {allocation.relations.server !== undefined ?
+                                            <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                <NavLink to={`/admin/servers/${allocation.serverId}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                    {allocation.relations.server.name}
+                                                </NavLink>
+                                            </td>
+                                            :
+                                            <td/>
+                                        }
+                                    </tr>
+                                ))
+                                }
+                            </TableBody>
+                        </table>
+
+                        { allocations === undefined || (error && isValidating) ?
+                            <Loading/>
+                            :
+                            length < 1 ?
+                                <NoItems/>
+                                :
+                                null
+                        }
+                    </div>
+                </Pagination>
+            </ContentWrapper>
+        </AdminTable>
+    );
+}
+
+export default (props: Props) => {
+    const hooks = useTableHooks<Filters>(props.filters);
+
+    return (
+        <AllocationsContext.Provider value={hooks}>
+            <AllocationsTable {...props} />
+        </AllocationsContext.Provider>
+    );
+};
--- a/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
+++ b/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
@ -1,14 +1,18 @@
+import createAllocation from '@/api/admin/nodes/allocations/createAllocation';
+import Field from '@/components/elements/Field';
 import { Form, Formik, FormikHelpers } from 'formik';
 import React, { useEffect, useState } from 'react';
 import tw from 'twin.macro';
 import { array, number, object, string } from 'yup';
 import getAllocations from '@/api/admin/nodes/getAllocations';
+import getAllocations2 from '@/api/admin/nodes/allocations/getAllocations';
 import Button from '@/components/elements/Button';
 import SelectField, { Option } from '@/components/elements/SelectField';

 interface Values {
    ips: string[];
    ports: number[];
+    alias: string;
 }

 const distinct = (value: any, index: any, self: any) => {
@ -19,6 +23,8 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
    const [ ips, setIPs ] = useState<Option[]>([]);
    const [ ports ] = useState<Option[]>([]);

+    const { mutate } = getAllocations2(nodeId, [ 'server' ]);
+
    useEffect(() => {
        getAllocations(nodeId)
            .then(allocations => {
@ -40,6 +46,11 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {

    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
        setSubmitting(false);
+
+        values.ips.forEach(async (ip) => {
+            const allocations = await createAllocation(nodeId, { ip, ports: values.ports, alias: values.alias }, [ 'server' ]);
+            await mutate(data => ({ ...data!, items: { ...data!.items!, ...allocations } }));
+        });
    };

    return (
@ -48,6 +59,7 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
            initialValues={{
                ips: [] as string[],
                ports: [] as number[],
+                alias: '',
            }}
            validationSchema={object().shape({
                ips: array(string()).min(1, 'You must select at least one ip address.'),
@ -80,6 +92,15 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
                            isCreatable
                        />

+                        <div css={tw`mt-6`}>
+                            <Field
+                                id={'alias'}
+                                name={'alias'}
+                                label={'Alias'}
+                                type={'text'}
+                            />
+                        </div>
+
                        <div css={tw`w-full flex flex-row items-center mt-6`}>
                            <div css={tw`flex ml-auto`}>
                                <Button type={'submit'} disabled={isSubmitting || !isValid}>
--- a/resources/scripts/components/elements/SelectField.tsx
+++ b/resources/scripts/components/elements/SelectField.tsx
@ -37,7 +37,7 @@ export const SelectStyle: StylesConfig<T, any, any> = {
    control: (base: CSSObject, props: ControlProps<T, any, any>): CSSObject => {
        return {
            ...base,
-            height: '2.75rem',
+            height: '3rem',
            /* paddingTop: '0.75rem',
            paddingBottom: '0.75rem',
            paddingLeft: '4rem',
--- a/resources/scripts/state/admin/allocations.ts
+++ b/resources/scripts/state/admin/allocations.ts
@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminAllocationStore {
+    selectedAllocations: number[];
+
+    setSelectedAllocations: Action<AdminAllocationStore, number[]>;
+    appendSelectedAllocation: Action<AdminAllocationStore, number>;
+    removeSelectedAllocation: Action<AdminAllocationStore, number>;
+}
+
+const allocations: AdminAllocationStore = {
+    selectedAllocations: [],
+
+    setSelectedAllocations: action((state, payload) => {
+        state.selectedAllocations = payload;
+    }),
+
+    appendSelectedAllocation: action((state, payload) => {
+        state.selectedAllocations = state.selectedAllocations.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedAllocation: action((state, payload) => {
+        state.selectedAllocations = state.selectedAllocations.filter(id => id !== payload);
+    }),
+};
+
+export default allocations;
--- a/resources/scripts/state/admin/index.ts
+++ b/resources/scripts/state/admin/index.ts
@ -1,6 +1,7 @@
 import { createContextStore } from 'easy-peasy';
 import { composeWithDevTools } from 'redux-devtools-extension';

+import allocations, { AdminAllocationStore } from '@/state/admin/allocations';
 import databases, { AdminDatabaseStore } from '@/state/admin/databases';
 import locations, { AdminLocationStore } from '@/state/admin/locations';
 import mounts, { AdminMountStore } from '@/state/admin/mounts';
@ -11,6 +12,7 @@ import servers, { AdminServerStore } from '@/state/admin/servers';
 import users, { AdminUserStore } from '@/state/admin/users';

 interface AdminStore {
+    allocations: AdminAllocationStore;
    databases: AdminDatabaseStore;
    locations: AdminLocationStore;
    mounts: AdminMountStore;
@ -22,6 +24,7 @@ interface AdminStore {
 }

 export const AdminContext = createContextStore<AdminStore>({
+    allocations,
    databases,
    locations,
    mounts,
--- a/routes/api-application.php
+++ b/routes/api-application.php
@ -13,14 +13,14 @@ Route::get('/version', 'VersionController');
 |
 */
 Route::group(['prefix' => '/databases'], function () {
-    Route::get('/', 'Databases\DatabaseController@index');
-    Route::get('/{databaseHost}', 'Databases\DatabaseController@view');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Databases\DatabaseController::class, 'index']);
+    Route::get('/{databaseHost}', [\Pterodactyl\Http\Controllers\Api\Application\Databases\DatabaseController::class, 'view']);

-    Route::post('/', 'Databases\DatabaseController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Databases\DatabaseController::class, 'store']);

-    Route::patch('/{databaseHost}', 'Databases\DatabaseController@update');
+    Route::patch('/{databaseHost}', [\Pterodactyl\Http\Controllers\Api\Application\Databases\DatabaseController::class, 'update']);

-    Route::delete('/{databaseHost}', 'Databases\DatabaseController@delete');
+    Route::delete('/{databaseHost}', [\Pterodactyl\Http\Controllers\Api\Application\Databases\DatabaseController::class, 'delete']);
 });

 /*
@ -32,13 +32,13 @@ Route::group(['prefix' => '/databases'], function () {
 |
 */
 Route::group(['prefix' => '/eggs'], function () {
-    Route::get('/{egg}', 'Eggs\EggController@view');
+    Route::get('/{egg}', [\Pterodactyl\Http\Controllers\Api\Application\Eggs\EggController::class, 'view']);

-    Route::post('/', 'Eggs\EggController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Eggs\EggController::class, 'store']);

-    Route::patch('/{egg}', 'Eggs\EggController@update');
+    Route::patch('/{egg}', [\Pterodactyl\Http\Controllers\Api\Application\Eggs\EggController::class, 'update']);

-    Route::delete('/{egg}', 'Eggs\EggController@delete');
+    Route::delete('/{egg}', [\Pterodactyl\Http\Controllers\Api\Application\Eggs\EggController::class, 'delete']);
 });

 /*
@ -50,14 +50,14 @@ Route::group(['prefix' => '/eggs'], function () {
 |
 */
 Route::group(['prefix' => '/locations'], function () {
-    Route::get('/', 'Locations\LocationController@index')->name('api.applications.locations');
-    Route::get('/{location}', 'Locations\LocationController@view')->name('api.application.locations.view');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Locations\LocationController::class, 'index']);
+    Route::get('/{location}', [\Pterodactyl\Http\Controllers\Api\Application\Locations\LocationController::class, 'view']);

-    Route::post('/', 'Locations\LocationController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Locations\LocationController::class, 'store']);

-    Route::patch('/{location}', 'Locations\LocationController@update');
+    Route::patch('/{location}', [\Pterodactyl\Http\Controllers\Api\Application\Locations\LocationController::class, 'update']);

-    Route::delete('/{location}', 'Locations\LocationController@delete');
+    Route::delete('/{location}', [\Pterodactyl\Http\Controllers\Api\Application\Locations\LocationController::class, 'delete']);
 });

 /*
@ -69,19 +69,19 @@ Route::group(['prefix' => '/locations'], function () {
 |
 */
 Route::group(['prefix' => '/mounts'], function () {
-    Route::get('/', 'Mounts\MountController@index');
-    Route::get('/{mount}', 'Mounts\MountController@view');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'index']);
+    Route::get('/{mount}', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'view']);

-    Route::post('/', 'Mounts\MountController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'store']);

-    Route::put('/{mount}/eggs', 'Mounts\MountController@addEggs');
-    Route::put('/{mount}/nodes', 'Mounts\MountController@addNodes');
+    Route::put('/{mount}/eggs', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'addEggs']);
+    Route::put('/{mount}/nodes', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'addNodes']);

-    Route::patch('/{mount}', 'Mounts\MountController@update');
+    Route::patch('/{mount}', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'update']);

-    Route::delete('/{mount}', 'Mounts\MountController@delete');
-    Route::delete('/{mount}/eggs', 'Mounts\MountController@deleteEggs');
-    Route::delete('/{mount}/nodes', 'Mounts\MountController@deleteNodes');
+    Route::delete('/{mount}', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'delete']);
+    Route::delete('/{mount}/eggs', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'deleteEggs']);
+    Route::delete('/{mount}/nodes', [\Pterodactyl\Http\Controllers\Api\Application\Mounts\MountController::class, 'deleteNodes']);
 });

 /*
@ -93,15 +93,15 @@ Route::group(['prefix' => '/mounts'], function () {
 |
 */
 Route::group(['prefix' => '/nests'], function () {
-    Route::get('/', 'Nests\NestController@index')->name('api.application.nests');
-    Route::get('/{nest}', 'Nests\NestController@view')->name('api.application.nests.view');
-    Route::get('/{nest}/eggs', 'Eggs\EggController@index');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Nests\NestController::class, 'index']);
+    Route::get('/{nest}', [\Pterodactyl\Http\Controllers\Api\Application\Nests\NestController::class, 'view']);
+    Route::get('/{nest}/eggs', [\Pterodactyl\Http\Controllers\Api\Application\Eggs\EggController::class, 'index']);

-    Route::post('/', 'Nests\NestController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Nests\NestController::class, 'store']);

-    Route::patch('/{nest}', 'Nests\NestController@update');
+    Route::patch('/{nest}', [\Pterodactyl\Http\Controllers\Api\Application\Nests\NestController::class, 'update']);

-    Route::delete('/{nest}', 'Nests\NestController@delete');
+    Route::delete('/{nest}', [\Pterodactyl\Http\Controllers\Api\Application\Nests\NestController::class, 'delete']);
 });

 /*
@ -113,22 +113,22 @@ Route::group(['prefix' => '/nests'], function () {
 |
 */
 Route::group(['prefix' => '/nodes'], function () {
-    Route::get('/', 'Nodes\NodeController@index')->name('api.application.nodes');
-    Route::get('/deployable', 'Nodes\NodeDeploymentController');
-    Route::get('/{node}', 'Nodes\NodeController@view')->name('api.application.nodes.view');
-    Route::get('/{node}/configuration', 'Nodes\NodeConfigurationController');
-    Route::get('/{node}/information', 'Nodes\NodeInformationController');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeController::class, 'index']);
+    Route::get('/deployable', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeDeploymentController::class, '__invoke']);
+    Route::get('/{node}', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeController::class, 'view']);
+    Route::get('/{node}/configuration', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeConfigurationController::class, '__invoke']);
+    Route::get('/{node}/information', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeInformationController::class, '__invoke']);

-    Route::post('/', 'Nodes\NodeController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeController::class, 'store']);

-    Route::patch('/{node}', 'Nodes\NodeController@update');
+    Route::patch('/{node}', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeController::class, 'update']);

-    Route::delete('/{node}', 'Nodes\NodeController@delete');
+    Route::delete('/{node}', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\NodeController::class, 'delete']);

    Route::group(['prefix' => '/{node}/allocations'], function () {
-        Route::get('/', 'Nodes\AllocationController@index')->name('api.application.allocations');
-        Route::post('/', 'Nodes\AllocationController@store');
-        Route::delete('/{allocation}', 'Nodes\AllocationController@delete')->name('api.application.allocations.view');
+        Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\AllocationController::class, 'index']);
+        Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\AllocationController::class, 'store']);
+        Route::delete('/{allocation}', [\Pterodactyl\Http\Controllers\Api\Application\Nodes\AllocationController::class, 'delete']);
    });
 });

@ -141,14 +141,14 @@ Route::group(['prefix' => '/nodes'], function () {
 |
 */
 Route::group(['prefix' => '/roles'], function () {
-    Route::get('/', 'Roles\RoleController@index');
-    Route::get('/{role}', 'Roles\RoleController@view');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Roles\RoleController::class, 'index']);
+    Route::get('/{role}', [\Pterodactyl\Http\Controllers\Api\Application\Roles\RoleController::class, 'view']);

-    Route::post('/', 'Roles\RoleController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Roles\RoleController::class, 'store']);

-    Route::patch('/{role}', 'Roles\RoleController@update');
+    Route::patch('/{role}', [\Pterodactyl\Http\Controllers\Api\Application\Roles\RoleController::class, 'update']);

-    Route::delete('/{role}', 'Roles\RoleController@delete');
+    Route::delete('/{role}', [\Pterodactyl\Http\Controllers\Api\Application\Roles\RoleController::class, 'delete']);
 });

 /*
@ -160,31 +160,31 @@ Route::group(['prefix' => '/roles'], function () {
 |
 */
 Route::group(['prefix' => '/servers'], function () {
-    Route::get('/', 'Servers\ServerController@index')->name('api.application.servers');
-    Route::get('/{server}', 'Servers\ServerController@view')->name('api.application.servers.view');
-    Route::get('/external/{external_id}', 'Servers\ExternalServerController@index')->name('api.application.servers.external');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerController::class, 'index']);
+    Route::get('/{server}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerController::class, 'view']);
+    Route::get('/external/{external_id}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ExternalServerController::class, 'index']);

-    Route::patch('/{server}/details', 'Servers\ServerDetailsController@details')->name('api.application.servers.details');
-    Route::patch('/{server}/build', 'Servers\ServerDetailsController@build')->name('api.application.servers.build');
-    Route::patch('/{server}/startup', 'Servers\StartupController@index')->name('api.application.servers.startup');
+    Route::patch('/{server}/details', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerDetailsController::class, 'details']);
+    Route::patch('/{server}/build', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerDetailsController::class, 'build']);
+    Route::patch('/{server}/startup', [\Pterodactyl\Http\Controllers\Api\Application\Servers\StartupController::class, 'index']);

-    Route::post('/', 'Servers\ServerController@store');
-    Route::post('/{server}/suspend', 'Servers\ServerManagementController@suspend')->name('api.application.servers.suspend');
-    Route::post('/{server}/unsuspend', 'Servers\ServerManagementController@unsuspend')->name('api.application.servers.unsuspend');
-    Route::post('/{server}/reinstall', 'Servers\ServerManagementController@reinstall')->name('api.application.servers.reinstall');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerController::class, 'store']);
+    Route::post('/{server}/suspend', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerManagementController::class, 'suspend']);
+    Route::post('/{server}/unsuspend', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerManagementController::class, 'unsuspend']);
+    Route::post('/{server}/reinstall', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerManagementController::class, 'reinstall']);

-    Route::delete('/{server}', 'Servers\ServerController@delete');
-    Route::delete('/{server}/{force?}', 'Servers\ServerController@delete');
+    Route::delete('/{server}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerController::class, 'delete']);
+    Route::delete('/{server}/{force?}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\ServerController::class, 'delete']);

    // Database Management Endpoint
    Route::group(['prefix' => '/{server}/databases'], function () {
-        Route::get('/', 'Servers\DatabaseController@index')->name('api.application.servers.databases');
-        Route::get('/{database}', 'Servers\DatabaseController@view')->name('api.application.servers.databases.view');
+        Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Servers\DatabaseController::class, 'index']);
+        Route::get('/{database}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\DatabaseController::class, 'view']);

-        Route::post('/', 'Servers\DatabaseController@store');
-        Route::post('/{database}/reset-password', 'Servers\DatabaseController@resetPassword');
+        Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Servers\DatabaseController::class, 'store']);
+        Route::post('/{database}/reset-password', [\Pterodactyl\Http\Controllers\Api\Application\Servers\DatabaseController::class, 'resetPassword']);

-        Route::delete('/{database}', 'Servers\DatabaseController@delete');
+        Route::delete('/{database}', [\Pterodactyl\Http\Controllers\Api\Application\Servers\DatabaseController::class, 'delete']);
    });
 });

@ -197,13 +197,13 @@ Route::group(['prefix' => '/servers'], function () {
 |
 */
 Route::group(['prefix' => '/users'], function () {
-    Route::get('/', 'Users\UserController@index')->name('api.application.users');
-    Route::get('/{user}', 'Users\UserController@view')->name('api.application.users.view');
-    Route::get('/external/{external_id}', 'Users\ExternalUserController@index')->name('api.application.users.external');
+    Route::get('/', [\Pterodactyl\Http\Controllers\Api\Application\Users\UserController::class, 'index']);
+    Route::get('/{user}', [\Pterodactyl\Http\Controllers\Api\Application\Users\UserController::class, 'view']);
+    Route::get('/external/{external_id}', [\Pterodactyl\Http\Controllers\Api\Application\Users\ExternalUserController::class, 'index']);

-    Route::post('/', 'Users\UserController@store');
+    Route::post('/', [\Pterodactyl\Http\Controllers\Api\Application\Users\UserController::class, 'store']);

-    Route::patch('/{user}', 'Users\UserController@update');
+    Route::patch('/{user}', [\Pterodactyl\Http\Controllers\Api\Application\Users\UserController::class, 'update']);

-    Route::delete('/{user}', 'Users\UserController@delete');
+    Route::delete('/{user}', [\Pterodactyl\Http\Controllers\Api\Application\Users\UserController::class, 'delete']);
 });
--- a/yarn.lock
+++ b/yarn.lock
@ -10001,7 +10001,7 @@ fsevents@^1.2.7:
    styled-components: ^5.3.1
    styled-components-breakpoint: ^3.0.0-preview.20
    svg-url-loader: ^7.1.1
-    swr: ^1.0.0
+    swr: ^1.0.1
    tailwindcss: ^2.2.7
    terser-webpack-plugin: ^4.2.3
    twin.macro: ^2.7.0
@ -11986,14 +11986,14 @@ resolve@^2.0.0-next.3:
  languageName: node
  linkType: hard

-"swr@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "swr@npm:1.0.0"
+"swr@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "swr@npm:1.0.1"
  dependencies:
    dequal: 2.0.2
  peerDependencies:
    react: ^16.11.0 || ^17.0.0
-  checksum: 8ffb767ca5c2f0d5e2280d31a6f497fac2739cf7c3518b0266b8d5c619ea9a74b1953b82e13b47463f6dd4f122885f941ce785b2fbf4d45e4b2e1d88f62b9c74
+  checksum: 8aaa10c4c65cb9b46a143a52ac2728111fc8af96e83781df1f7b7d56aa027ef720b7feb230658616e479f224f684d4cbc5d2ca3265c40f95a3140dbdba801061
  languageName: node
  linkType: hard