Add tables for almost every admin change, update composer dependencies

resources/scripts/api/admin/databases/getDatabases.ts

@@ -0,0 +1,45 @@
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
+
+export interface Database {
+    id: number;
+    name: string;
+    host: string;
+    port: number;
+    username: string;
+    maxDatabases: number;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({
+    id: attributes.id,
+    name: attributes.name,
+    host: attributes.host,
+    port: attributes.port,
+    username: attributes.username,
+    maxDatabases: attributes.max_databases,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+});
+
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+}
+
+export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+
+export default () => {
+    const { page } = useContext(Context);
+
+    return useSWR<PaginatedResult<Database>>([ 'databases', page ], async () => {
+        const { data } = await http.get('/api/application/databases', { params: { page } });
+
+        return ({
+            items: (data.data || []).map(rawDataToDatabase),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/api/admin/locations/getLocations.ts

@@ -0,0 +1,39 @@
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
+
+export interface Location {
+    id: number;
+    short: string;
+    long: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export const rawDataToLocation = ({ attributes }: FractalResponseData): Location => ({
+    id: attributes.id,
+    short: attributes.short,
+    long: attributes.long,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+});
+
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+}
+
+export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+
+export default () => {
+    const { page } = useContext(Context);
+
+    return useSWR<PaginatedResult<Location>>([ 'locations', page ], async () => {
+        const { data } = await http.get('/api/application/locations', { params: { page } });
+
+        return ({
+            items: (data.data || []).map(rawDataToLocation),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/api/admin/mounts/getMounts.ts

@@ -0,0 +1,49 @@
+import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
+
+export interface Mount {
+    id: number;
+    uuid: string;
+    name: string;
+    description: string;
+    source: string;
+    target: string;
+    readOnly: boolean;
+    userMountable: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+export const rawDataToMount = ({ attributes }: FractalResponseData): Mount => ({
+    id: attributes.id,
+    uuid: attributes.uuid,
+    name: attributes.name,
+    description: attributes.description,
+    source: attributes.source,
+    target: attributes.target,
+    readOnly: attributes.read_only,
+    userMountable: attributes.user_mountable,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+});
+
+interface ctx {
+    page: number;
+    setPage: (value: number | ((s: number) => number)) => void;
+}
+
+export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
+
+export default () => {
+    const { page } = useContext(Context);
+
+    return useSWR<PaginatedResult<Mount>>([ 'mounts', page ], async () => {
+        const { data } = await http.get('/api/application/mounts', { params: { page } });
+
+        return ({
+            items: (data.data || []).map(rawDataToMount),
+            pagination: getPaginationSet(data.meta.pagination),
+        });
+    });
+};

resources/scripts/components/admin/api/ApiKeysContainer.tsx

@@ -1,23 +1,9 @@
-import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
-import Spinner from '@/components/elements/Spinner';
-
-interface Key {
-    id: number,
-}
+import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
 
 export default () => {
-    const [ loading, setLoading ] = useState<boolean>(true);
-    const [ keys ] = useState<Key[]>([]);
-
-    useEffect(() => {
-        setTimeout(() => {
-            setLoading(false);
-        }, 500);
-    });
-
     return (
         <AdminContentBlock>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
@@ -28,27 +14,6 @@ export default () => {
 
                 <NewApiKeyButton />
             </div>
-
-            <div css={tw`w-full flex flex-col`}>
-                <div css={tw`w-full flex flex-col bg-neutral-700 rounded-lg shadow-md`}>
-                    { loading ?
-                        <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
-                            <Spinner size={'base'}/>
-                        </div>
-                        :
-                        keys.length < 1 ?
-                            <div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
-                                <div css={tw`h-64 flex`}>
-                                    <img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
-                                </div>
-
-                                <p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>No items could be found, it&apos;s almost like they are hiding.</p>
-                            </div>
-                            :
-                            null
-                    }
-                </div>
-            </div>
         </AdminContentBlock>
     );
 };

resources/scripts/components/admin/databases/DatabasesContainer.tsx

@@ -1,12 +1,67 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 
-export default () => {
+const RowCheckbox = ({ id }: { id: number}) => {
+    const isChecked = AdminContext.useStoreState(state => state.databases.selectedDatabases.indexOf(id) >= 0);
+    const appendSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.appendSelectedDatabase);
+    const removeSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.removeSelectedDatabase);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedDatabase(id);
+                } else {
+                    removeSelectedDatabase(id);
+                }
+            }}
+        />
+    );
+};
+
+const DatabasesContainer = () => {
+    const match = useRouteMatch();
+
+    const { page, setPage } = useContext(DatabasesContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: databases, error, isValidating } = getDatabases();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('databases');
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'databases' });
+    }, [ error ]);
+
+    const length = databases?.items?.length || 0;
+
+    const setSelectedDatabases = AdminContext.useStoreActions(actions => actions.databases.setSelectedDatabases);
+    const selectedDatabasesLength = AdminContext.useStoreState(state => state.databases.selectedDatabases.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedDatabases(e.currentTarget.checked ? (databases?.items?.map(database => database.id) || []) : []);
+    };
+
+    useEffect(() => {
+        setSelectedDatabases([]);
+    }, [ page ]);
+
     return (
         <AdminContentBlock>
-            <div css={tw`w-full flex flex-row items-center`}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Databases</h2>
                     <p css={tw`text-base text-neutral-400`}>Database hosts that servers can have databases created on.</p>
@@ -16,6 +71,64 @@ export default () => {
                     New Database
                 </Button>
             </div>
+
+            <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
+
+            <AdminTable>
+                { databases === undefined || (error && isValidating) ?
+                    <Loading/>
+                    :
+                    length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
+                            onSelectAllClick={onSelectAllClick}
+                        >
+                            <Pagination data={databases} onPageSelect={setPage}>
+                                <div css={tw`overflow-x-auto`}>
+                                    <table css={tw`w-full table-auto`}>
+                                        <TableHead>
+                                            <TableHeader name={'ID'}/>
+                                            <TableHeader name={'Name'}/>
+                                            <TableHeader name={'Address'}/>
+                                        </TableHead>
+
+                                        <TableBody>
+                                            {
+                                                databases.items.map(database => (
+                                                    <TableRow key={database.id}>
+                                                        <td css={tw`pl-6`}>
+                                                            <RowCheckbox id={database.id}/>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                                {database.name}
+                                                            </NavLink>
+                                                        </td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.host}:{database.port}</td>
+                                                    </TableRow>
+                                                ))
+                                            }
+                                        </TableBody>
+                                    </table>
+                                </div>
+                            </Pagination>
+                        </ContentWrapper>
+                }
+            </AdminTable>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ page, setPage ] = useState<number>(1);
+
+    return (
+        <DatabasesContext.Provider value={{ page, setPage }}>
+            <DatabasesContainer/>
+        </DatabasesContext.Provider>
+    );
+};

resources/scripts/components/admin/locations/LocationsContainer.tsx

@@ -1,12 +1,67 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import getLocations, { Context as LocationsContext } from '@/api/admin/locations/getLocations';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
 
-export default () => {
+const RowCheckbox = ({ id }: { id: number}) => {
+    const isChecked = AdminContext.useStoreState(state => state.locations.selectedLocations.indexOf(id) >= 0);
+    const appendSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.appendSelectedLocation);
+    const removeSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.removeSelectedLocation);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedLocation(id);
+                } else {
+                    removeSelectedLocation(id);
+                }
+            }}
+        />
+    );
+};
+
+const LocationsContainer = () => {
+    const match = useRouteMatch();
+
+    const { page, setPage } = useContext(LocationsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: locations, error, isValidating } = getLocations();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('locations');
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'locations' });
+    }, [ error ]);
+
+    const length = locations?.items?.length || 0;
+
+    const setSelectedLocations = AdminContext.useStoreActions(actions => actions.locations.setSelectedLocations);
+    const selectedLocationsLength = AdminContext.useStoreState(state => state.locations.selectedLocations.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedLocations(e.currentTarget.checked ? (locations?.items?.map(location => location.id) || []) : []);
+    };
+
+    useEffect(() => {
+        setSelectedLocations([]);
+    }, [ page ]);
+
     return (
         <AdminContentBlock>
-            <div css={tw`w-full flex flex-row items-center`}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
                     <p css={tw`text-base text-neutral-400`}>All locations that nodes can be assigned to for easier categorization.</p>
@@ -16,6 +71,64 @@ export default () => {
                     New Location
                 </Button>
             </div>
+
+            <FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
+
+            <AdminTable>
+                { locations === undefined || (error && isValidating) ?
+                    <Loading/>
+                    :
+                    length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedLocationsLength === (length === 0 ? -1 : length)}
+                            onSelectAllClick={onSelectAllClick}
+                        >
+                            <Pagination data={locations} onPageSelect={setPage}>
+                                <div css={tw`overflow-x-auto`}>
+                                    <table css={tw`w-full table-auto`}>
+                                        <TableHead>
+                                            <TableHeader name={'ID'}/>
+                                            <TableHeader name={'Short Name'}/>
+                                            <TableHeader name={'Long Name'}/>
+                                        </TableHead>
+
+                                        <TableBody>
+                                            {
+                                                locations.items.map(location => (
+                                                    <TableRow key={location.id}>
+                                                        <td css={tw`pl-6`}>
+                                                            <RowCheckbox id={location.id}/>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                                {location.short}
+                                                            </NavLink>
+                                                        </td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
+                                                    </TableRow>
+                                                ))
+                                            }
+                                        </TableBody>
+                                    </table>
+                                </div>
+                            </Pagination>
+                        </ContentWrapper>
+                }
+            </AdminTable>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ page, setPage ] = useState<number>(1);
+
+    return (
+        <LocationsContext.Provider value={{ page, setPage }}>
+            <LocationsContainer/>
+        </LocationsContext.Provider>
+    );
+};

resources/scripts/components/admin/mounts/MountsContainer.tsx

@@ -1,12 +1,67 @@
-import Button from '@/components/elements/Button';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import Button from '@/components/elements/Button';
+
+const RowCheckbox = ({ id }: { id: number}) => {
+    const isChecked = AdminContext.useStoreState(state => state.mounts.selectedMounts.indexOf(id) >= 0);
+    const appendSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.appendSelectedMount);
+    const removeSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.removeSelectedMount);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedMount(id);
+                } else {
+                    removeSelectedMount(id);
+                }
+            }}
+        />
+    );
+};
+
+const MountsContainer = () => {
+    const match = useRouteMatch();
+
+    const { page, setPage } = useContext(MountsContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: mounts, error, isValidating } = getMounts();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('mounts');
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'mounts' });
+    }, [ error ]);
+
+    const length = mounts?.items?.length || 0;
+
+    const setSelectedMounts = AdminContext.useStoreActions(actions => actions.mounts.setSelectedMounts);
+    const selectedMountsLength = AdminContext.useStoreState(state => state.mounts.selectedMounts.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedMounts(e.currentTarget.checked ? (mounts?.items?.map(mount => mount.id) || []) : []);
+    };
+
+    useEffect(() => {
+        setSelectedMounts([]);
+    }, [ page ]);
 
-export default () => {
     return (
         <AdminContentBlock>
-            <div css={tw`w-full flex flex-row items-center`}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
                     <p css={tw`text-base text-neutral-400`}>Configure and manage additional mount points for servers.</p>
@@ -16,6 +71,62 @@ export default () => {
                     New Mount
                 </Button>
             </div>
+
+            <FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
+
+            <AdminTable>
+                { mounts === undefined || (error && isValidating) ?
+                    <Loading/>
+                    :
+                    length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedMountsLength === (length === 0 ? -1 : length)}
+                            onSelectAllClick={onSelectAllClick}
+                        >
+                            <Pagination data={mounts} onPageSelect={setPage}>
+                                <div css={tw`overflow-x-auto`}>
+                                    <table css={tw`w-full table-auto`}>
+                                        <TableHead>
+                                            <TableHeader name={'ID'}/>
+                                            <TableHeader name={'Name'}/>
+                                        </TableHead>
+
+                                        <TableBody>
+                                            {
+                                                mounts.items.map(mount => (
+                                                    <TableRow key={mount.id}>
+                                                        <td css={tw`pl-6`}>
+                                                            <RowCheckbox id={mount.id}/>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{mount.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                                {mount.name}
+                                                            </NavLink>
+                                                        </td>
+                                                    </TableRow>
+                                                ))
+                                            }
+                                        </TableBody>
+                                    </table>
+                                </div>
+                            </Pagination>
+                        </ContentWrapper>
+                }
+            </AdminTable>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ page, setPage ] = useState<number>(1);
+
+    return (
+        <MountsContext.Provider value={{ page, setPage }}>
+            <MountsContainer/>
+        </MountsContext.Provider>
+    );
+};

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -1,12 +1,67 @@
-import Button from '@/components/elements/Button';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { AdminContext } from '@/state/admin';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import AdminCheckbox from '@/components/admin/AdminCheckbox';
+import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
+import Button from '@/components/elements/Button';
+
+const RowCheckbox = ({ id }: { id: number}) => {
+    const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
+    const appendSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.appendSelectedNode);
+    const removeSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.removeSelectedNode);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedNode(id);
+                } else {
+                    removeSelectedNode(id);
+                }
+            }}
+        />
+    );
+};
+
+const NodesContainer = () => {
+    const match = useRouteMatch();
+
+    const { page, setPage } = useContext(NodesContext);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { data: nodes, error, isValidating } = getNodes();
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('nodes');
+            return;
+        }
+
+        clearAndAddHttpError({ error, key: 'nodes' });
+    }, [ error ]);
+
+    const length = nodes?.items?.length || 0;
+
+    const setSelectedNodes = AdminContext.useStoreActions(actions => actions.nodes.setSelectedNodes);
+    const selectedNodesLength = AdminContext.useStoreState(state => state.nodes.selectedNodes.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedNodes(e.currentTarget.checked ? (nodes?.items?.map(node => node.id) || []) : []);
+    };
+
+    useEffect(() => {
+        setSelectedNodes([]);
+    }, [ page ]);
 
-export default () => {
     return (
         <AdminContentBlock>
-            <div css={tw`w-full flex flex-row items-center`}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col`}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
                     <p css={tw`text-base text-neutral-400`}>All nodes available on the system.</p>
@@ -16,6 +71,62 @@ export default () => {
                     New Node
                 </Button>
             </div>
+
+            <FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>
+
+            <AdminTable>
+                { nodes === undefined || (error && isValidating) ?
+                    <Loading/>
+                    :
+                    length < 1 ?
+                        <NoItems/>
+                        :
+                        <ContentWrapper
+                            checked={selectedNodesLength === (length === 0 ? -1 : length)}
+                            onSelectAllClick={onSelectAllClick}
+                        >
+                            <Pagination data={nodes} onPageSelect={setPage}>
+                                <div css={tw`overflow-x-auto`}>
+                                    <table css={tw`w-full table-auto`}>
+                                        <TableHead>
+                                            <TableHeader name={'ID'}/>
+                                            <TableHeader name={'Name'}/>
+                                        </TableHead>
+
+                                        <TableBody>
+                                            {
+                                                nodes.items.map(node => (
+                                                    <TableRow key={node.id}>
+                                                        <td css={tw`pl-6`}>
+                                                            <RowCheckbox id={node.id}/>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{node.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                                {node.name}
+                                                            </NavLink>
+                                                        </td>
+                                                    </TableRow>
+                                                ))
+                                            }
+                                        </TableBody>
+                                    </table>
+                                </div>
+                            </Pagination>
+                        </ContentWrapper>
+                }
+            </AdminTable>
         </AdminContentBlock>
     );
 };
+
+export default () => {
+    const [ page, setPage ] = useState<number>(1);
+
+    return (
+        <NodesContext.Provider value={{ page, setPage }}>
+            <NodesContainer/>
+        </NodesContext.Provider>
+    );
+};

resources/scripts/components/admin/servers/NewServerContainer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import tw from 'twin.macro';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+
+export default () => {
+    return (
+        <AdminContentBlock>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col`}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2>
+                    <p css={tw`text-base text-neutral-400`}>Add a new server to the panel.</p>
+                </div>
+            </div>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/servers/ServersContainer.tsx

@@ -68,9 +68,11 @@ const UsersContainer = () => {
                     <p css={tw`text-base text-neutral-400`}>All servers available on the system.</p>
                 </div>
 
-                <Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
-                    New Server
-                </Button>
+                <NavLink to={`${match.url}/new`} css={tw`ml-auto`}>
+                    <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}>
+                        New Server
+                    </Button>
+                </NavLink>
             </div>
 
             <FlashMessageRender byKey={'servers'} css={tw`mb-4`}/>

resources/scripts/routers/AdminRouter.tsx

@@ -13,6 +13,7 @@ import DatabasesContainer from '@/components/admin/databases/DatabasesContainer'
 import NodesContainer from '@/components/admin/nodes/NodesContainer';
 import LocationsContainer from '@/components/admin/locations/LocationsContainer';
 import ServersContainer from '@/components/admin/servers/ServersContainer';
+import NewServerContainer from '@/components/admin/servers/NewServerContainer';
 import UsersContainer from '@/components/admin/users/UsersContainer';
 import RolesContainer from '@/components/admin/roles/RolesContainer';
 import RoleEditContainer from '@/components/admin/roles/RoleEditContainer';
@@ -175,7 +176,10 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
                         <Route path={`${match.path}/locations`} component={LocationsContainer} exact/>
                         <Route path={`${match.path}/nodes`} component={NodesContainer} exact/>
+
                         <Route path={`${match.path}/servers`} component={ServersContainer} exact/>
+                        <Route path={`${match.path}/servers/new`} component={NewServerContainer} exact/>
+
                         <Route path={`${match.path}/users`} component={UsersContainer} exact/>
 
                         <Route path={`${match.path}/roles`} component={RolesContainer} exact/>

resources/scripts/state/admin/databases.ts

@@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminDatabaseStore {
+    selectedDatabases: number[];
+
+    setSelectedDatabases: Action<AdminDatabaseStore, number[]>;
+    appendSelectedDatabase: Action<AdminDatabaseStore, number>;
+    removeSelectedDatabase: Action<AdminDatabaseStore, number>;
+}
+
+const databases: AdminDatabaseStore = {
+    selectedDatabases: [],
+
+    setSelectedDatabases: action((state, payload) => {
+        state.selectedDatabases = payload;
+    }),
+
+    appendSelectedDatabase: action((state, payload) => {
+        state.selectedDatabases = state.selectedDatabases.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedDatabase: action((state, payload) => {
+        state.selectedDatabases = state.selectedDatabases.filter(id => id !== payload);
+    }),
+};
+
+export default databases;

resources/scripts/state/admin/index.ts

@@ -1,20 +1,32 @@
 import { createContextStore } from 'easy-peasy';
 import { composeWithDevTools } from 'redux-devtools-extension';
 
+import databases, { AdminDatabaseStore } from '@/state/admin/databases';
+import locations, { AdminLocationStore } from '@/state/admin/locations';
+import mounts, { AdminMountStore } from '@/state/admin/mounts';
 import nests, { AdminNestStore } from '@/state/admin/nests';
+import nodes, { AdminNodeStore } from '@/state/admin/nodes';
 import roles, { AdminRoleStore } from '@/state/admin/roles';
 import servers, { AdminServerStore } from '@/state/admin/servers';
 import users, { AdminUserStore } from '@/state/admin/users';
 
 interface AdminStore {
+    databases: AdminDatabaseStore;
+    locations: AdminLocationStore;
+    mounts: AdminMountStore;
     nests: AdminNestStore;
+    nodes: AdminNodeStore;
     roles: AdminRoleStore;
     servers: AdminServerStore;
     users: AdminUserStore;
 }
 
 export const AdminContext = createContextStore<AdminStore>({
+    databases,
+    locations,
+    mounts,
     nests,
+    nodes,
     roles,
     servers,
     users,

resources/scripts/state/admin/locations.ts

@@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminLocationStore {
+    selectedLocations: number[];
+
+    setSelectedLocations: Action<AdminLocationStore, number[]>;
+    appendSelectedLocation: Action<AdminLocationStore, number>;
+    removeSelectedLocation: Action<AdminLocationStore, number>;
+}
+
+const locations: AdminLocationStore = {
+    selectedLocations: [],
+
+    setSelectedLocations: action((state, payload) => {
+        state.selectedLocations = payload;
+    }),
+
+    appendSelectedLocation: action((state, payload) => {
+        state.selectedLocations = state.selectedLocations.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedLocation: action((state, payload) => {
+        state.selectedLocations = state.selectedLocations.filter(id => id !== payload);
+    }),
+};
+
+export default locations;

resources/scripts/state/admin/mounts.ts

@@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminMountStore {
+    selectedMounts: number[];
+
+    setSelectedMounts: Action<AdminMountStore, number[]>;
+    appendSelectedMount: Action<AdminMountStore, number>;
+    removeSelectedMount: Action<AdminMountStore, number>;
+}
+
+const mounts: AdminMountStore = {
+    selectedMounts: [],
+
+    setSelectedMounts: action((state, payload) => {
+        state.selectedMounts = payload;
+    }),
+
+    appendSelectedMount: action((state, payload) => {
+        state.selectedMounts = state.selectedMounts.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedMount: action((state, payload) => {
+        state.selectedMounts = state.selectedMounts.filter(id => id !== payload);
+    }),
+};
+
+export default mounts;

resources/scripts/state/admin/nodes.ts

@@ -0,0 +1,27 @@
+import { action, Action } from 'easy-peasy';
+
+export interface AdminNodeStore {
+    selectedNodes: number[];
+
+    setSelectedNodes: Action<AdminNodeStore, number[]>;
+    appendSelectedNode: Action<AdminNodeStore, number>;
+    removeSelectedNode: Action<AdminNodeStore, number>;
+}
+
+const nodes: AdminNodeStore = {
+    selectedNodes: [],
+
+    setSelectedNodes: action((state, payload) => {
+        state.selectedNodes = payload;
+    }),
+
+    appendSelectedNode: action((state, payload) => {
+        state.selectedNodes = state.selectedNodes.filter(id => id !== payload).concat(payload);
+    }),
+
+    removeSelectedNode: action((state, payload) => {
+        state.selectedNodes = state.selectedNodes.filter(id => id !== payload);
+    }),
+};
+
+export default nodes;