ui(admin): implement user and node servers tab

app/Http/Controllers/Api/Application/Servers/ServerController.php

@@ -47,7 +47,7 @@ class ServerController extends ApplicationApiController
         }
 
         $servers = QueryBuilder::for(Server::query())
-            ->allowedFilters(['uuid', 'uuidShort', 'name', 'image', 'external_id'])
+            ->allowedFilters(['id', 'uuid', 'uuidShort', 'name', 'owner_id', 'node_id', 'external_id'])
             ->allowedSorts(['id', 'uuid', 'uuidShort', 'name', 'owner_id', 'node_id', 'status'])
             ->paginate($perPage);
 

resources/scripts/api/admin/servers/getServers.ts

@@ -1,8 +1,8 @@
-import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
-import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
 import { useContext } from 'react';
 import useSWR from 'swr';
 import { createContext } from '@/api/admin';
+import http, { FractalResponseData, 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';
 
@@ -104,8 +104,9 @@ export interface Filters {
     id?: string;
     uuid?: string;
     name?: string;
-    image?: string;
     /* eslint-disable camelcase */
+    owner_id?: string;
+    node_id?: string;
     external_id?: string;
     /* eslint-enable camelcase */
 }

resources/scripts/components/admin/AdminTable.tsx

@@ -8,9 +8,9 @@ import tw, { styled } from 'twin.macro';
 import { PaginatedResult, PaginationDataSet } from '@/api/http';
 import { ListContext as TableHooks } from '@/api/admin';
 
-export function useTableHooks<T> (): TableHooks<T> {
+export function useTableHooks<T> (initialState?: T | (() => T)): TableHooks<T> {
     const [ page, setPage ] = useState<number>(1);
-    const [ filters, setFilters ] = useState<T | null>(null);
+    const [ filters, setFilters ] = useState<T | null>(initialState || null);
     const [ sort, setSortState ] = useState<string | null>(null);
     const [ sortDirection, setSortDirection ] = useState<boolean>(false);
 

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

@@ -14,6 +14,7 @@ import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
 import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
 import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
 import NodeAllocationContainer from '@/components/admin/nodes/NodeAllocationContainer';
+import NodeServers from '@/components/admin/nodes/NodeServers';
 
 interface ctx {
     node: Node | undefined;
@@ -123,7 +124,7 @@ const NodeRouter = () => {
                 </Route>
 
                 <Route path={`${match.path}/servers`} exact>
-                    <p>Servers</p>
+                    <NodeServers/>
                 </Route>
             </Switch>
         </AdminContentBlock>

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import ServersTable from '@/components/admin/servers/ServersTable';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+
+function NodeServers () {
+    const node = Context.useStoreState(state => state.node);
+
+    return (
+        <ServersTable filters={{ node_id: node?.id?.toString() }}/>
+    );
+}
+
+export default NodeServers;

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

@@ -1,76 +1,14 @@
-import React, { useContext, useEffect } from 'react';
+import React from 'react';
-import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
-import AdminCheckbox from '@/components/admin/AdminCheckbox';
-import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
-import Button from '@/components/elements/Button';
-import CopyOnClick from '@/components/elements/CopyOnClick';
-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 FlashMessageRender from '@/components/FlashMessageRender';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import ServersTable from '@/components/admin/servers/ServersTable';
+import Button from '@/components/elements/Button';
 
-const RowCheckbox = ({ id }: { id: number }) => {
+function ServersContainer () {
-    const isChecked = AdminContext.useStoreState(state => state.servers.selectedServers.indexOf(id) >= 0);
-    const appendSelectedServer = AdminContext.useStoreActions(actions => actions.servers.appendSelectedServer);
-    const removeSelectedServer = AdminContext.useStoreActions(actions => actions.servers.removeSelectedServer);
-
-    return (
-        <AdminCheckbox
-            name={id.toString()}
-            checked={isChecked}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                if (e.currentTarget.checked) {
-                    appendSelectedServer(id);
-                } else {
-                    removeSelectedServer(id);
-                }
-            }}
-        />
-    );
-};
-
-const ServersContainer = () => {
     const match = useRouteMatch();
 
-    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
-
-    const length = servers?.items?.length || 0;
-
-    const setSelectedServers = AdminContext.useStoreActions(actions => actions.servers.setSelectedServers);
-    const selectedServerLength = AdminContext.useStoreState(state => state.servers.selectedServers.length);
-
-    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSelectedServers(e.currentTarget.checked ? (servers?.items?.map(server => server.id) || []) : []);
-    };
-
-    const onSearch = (query: string): Promise<void> => {
-        return new Promise((resolve) => {
-            if (query.length < 2) {
-                setFilters(null);
-            } else {
-                setFilters({ name: query });
-            }
-            return resolve();
-        });
-    };
-
-    useEffect(() => {
-        setSelectedServers([]);
-    }, [ page ]);
-
-    useEffect(() => {
-        if (!error) {
-            clearFlashes('servers');
-            return;
-        }
-
-        clearAndAddHttpError({ key: 'servers', error });
-    }, [ error ]);
-
     return (
         <AdminContentBlock title={'Servers'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
@@ -90,117 +28,9 @@ const ServersContainer = () => {
 
             <FlashMessageRender byKey={'servers'} css={tw`mb-4`}/>
 
-            <AdminTable>
+            <ServersTable/>
-                <ContentWrapper
-                    checked={selectedServerLength === (length === 0 ? -1 : length)}
-                    onSelectAllClick={onSelectAllClick}
-                    onSearch={onSearch}
-                >
-                    <Pagination data={servers} onPageSelect={setPage}>
-                        <div css={tw`overflow-x-auto`}>
-                            <table css={tw`w-full table-auto`}>
-                                <TableHead>
-                                    <TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
-                                    <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
-                                    <TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
-                                    <TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
-                                    <TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
-                                </TableHead>
-
-                                <TableBody>
-                                    { servers !== undefined && !error && !isValidating && length > 0 &&
-                                        servers.items.map(server => (
-                                            <tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
-                                                <td css={tw`pl-6`}>
-                                                    <RowCheckbox id={server.id}/>
-                                                </td>
-
-                                                <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
-                                                    <CopyOnClick text={server.identifier}>
-                                                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
-                                                    </CopyOnClick>
-                                                </td>
-
-                                                <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
-                                                    <NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
-                                                        {server.name}
-                                                    </NavLink>
-                                                </td>
-
-                                                {/* TODO: Have permission check for displaying user information. */}
-                                                <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
-                                                    <NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
-                                                        <div css={tw`text-sm text-neutral-200`}>
-                                                            Silly User
-                                                        </div>
-
-                                                        <div css={tw`text-sm text-neutral-400`}>
-                                                            {server.relations.user?.email}
-                                                        </div>
-                                                    </NavLink>
-                                                </td>
-
-                                                {/* TODO: Have permission check for displaying node information. */}
-                                                <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
-                                                    <NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
-                                                        <div css={tw`text-sm text-neutral-200`}>
-                                                            {server.relations.node?.name}
-                                                        </div>
-
-                                                        <div css={tw`text-sm text-neutral-400`}>
-                                                            {server.relations.node?.fqdn}
-                                                        </div>
-                                                    </NavLink>
-                                                </td>
-
-                                                <td css={tw`px-6 whitespace-nowrap`}>
-                                                    {server.status === 'installing' ?
-                                                        <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
-                                                            Installing
-                                                        </span>
-                                                        :
-                                                        server.status === 'transferring' ?
-                                                            <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
-                                                                Transferring
-                                                            </span>
-                                                            : server.status === 'suspended' ?
-                                                                <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
-                                                                    Suspended
-                                                                </span>
-                                                                :
-                                                                <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
-                                                                    Active
-                                                                </span>
-                                                    }
-                                                </td>
-                                            </tr>
-                                        ))
-                                    }
-                                </TableBody>
-                            </table>
-
-                            { servers === undefined || (error && isValidating) ?
-                                <Loading/>
-                                :
-                                length < 1 ?
-                                    <NoItems/>
-                                    :
-                                    null
-                            }
-                        </div>
-                    </Pagination>
-                </ContentWrapper>
-            </AdminTable>
         </AdminContentBlock>
     );
-};
+}
 
-export default () => {
+export default ServersContainer;
-    const hooks = useTableHooks<Filters>();
-
-    return (
-        <ServersContext.Provider value={hooks}>
-            <ServersContainer/>
-        </ServersContext.Provider>
-    );
-};

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

@@ -0,0 +1,189 @@
+import React, { useContext, useEffect } from 'react';
+import { NavLink, useRouteMatch } from 'react-router-dom';
+import tw from 'twin.macro';
+import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
+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 { AdminContext } from '@/state/admin';
+import useFlash from '@/plugins/useFlash';
+
+function RowCheckbox ({ id }: { id: number }) {
+    const isChecked = AdminContext.useStoreState(state => state.servers.selectedServers.indexOf(id) >= 0);
+    const appendSelectedServer = AdminContext.useStoreActions(actions => actions.servers.appendSelectedServer);
+    const removeSelectedServer = AdminContext.useStoreActions(actions => actions.servers.removeSelectedServer);
+
+    return (
+        <AdminCheckbox
+            name={id.toString()}
+            checked={isChecked}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.currentTarget.checked) {
+                    appendSelectedServer(id);
+                } else {
+                    removeSelectedServer(id);
+                }
+            }}
+        />
+    );
+}
+
+interface Props {
+    filters?: Filters;
+}
+
+function ServersTable ({ filters }: Props) {
+    const match = useRouteMatch();
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
+    const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
+
+    const length = servers?.items?.length || 0;
+
+    const setSelectedServers = AdminContext.useStoreActions(actions => actions.servers.setSelectedServers);
+    const selectedServerLength = AdminContext.useStoreState(state => state.servers.selectedServers.length);
+
+    const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedServers(e.currentTarget.checked ? (servers?.items?.map(server => server.id) || []) : []);
+    };
+
+    const onSearch = (query: string): Promise<void> => {
+        return new Promise((resolve) => {
+            if (query.length < 2) {
+                setFilters(filters || null);
+            } else {
+                setFilters({ ...filters, name: query });
+            }
+            return resolve();
+        });
+    };
+
+    useEffect(() => {
+        setSelectedServers([]);
+    }, [ page ]);
+
+    useEffect(() => {
+        if (!error) {
+            clearFlashes('servers');
+            return;
+        }
+
+        clearAndAddHttpError({ key: 'servers', error });
+    }, [ error ]);
+
+    return (
+        <AdminTable>
+            <ContentWrapper
+                checked={selectedServerLength === (length === 0 ? -1 : length)}
+                onSelectAllClick={onSelectAllClick}
+                onSearch={onSearch}
+            >
+                <Pagination data={servers} onPageSelect={setPage}>
+                    <div css={tw`overflow-x-auto`}>
+                        <table css={tw`w-full table-auto`}>
+                            <TableHead>
+                                <TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
+                                <TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
+                                <TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
+                                <TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
+                                <TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
+                            </TableHead>
+
+                            <TableBody>
+                                { servers !== undefined && !error && !isValidating && length > 0 &&
+                                servers.items.map(server => (
+                                    <tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
+                                        <td css={tw`pl-6`}>
+                                            <RowCheckbox id={server.id}/>
+                                        </td>
+
+                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                            <CopyOnClick text={server.identifier}>
+                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
+                                            </CopyOnClick>
+                                        </td>
+
+                                        <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                            <NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                {server.name}
+                                            </NavLink>
+                                        </td>
+
+                                        {/* TODO: Have permission check for displaying user information. */}
+                                        <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                            <NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                <div css={tw`text-sm text-neutral-200`}>
+                                                    Silly User
+                                                </div>
+
+                                                <div css={tw`text-sm text-neutral-400`}>
+                                                    {server.relations.user?.email}
+                                                </div>
+                                            </NavLink>
+                                        </td>
+
+                                        {/* TODO: Have permission check for displaying node information. */}
+                                        <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                            <NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                <div css={tw`text-sm text-neutral-200`}>
+                                                    {server.relations.node?.name}
+                                                </div>
+
+                                                <div css={tw`text-sm text-neutral-400`}>
+                                                    {server.relations.node?.fqdn}
+                                                </div>
+                                            </NavLink>
+                                        </td>
+
+                                        <td css={tw`px-6 whitespace-nowrap`}>
+                                            {server.status === 'installing' ?
+                                                <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
+                                                    Installing
+                                                </span>
+                                                :
+                                                server.status === 'transferring' ?
+                                                    <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
+                                                    Transferring
+                                                    </span>
+                                                    : server.status === 'suspended' ?
+                                                        <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
+                                                            Suspended
+                                                        </span>
+                                                        :
+                                                        <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
+                                                            Active
+                                                        </span>
+                                            }
+                                        </td>
+                                    </tr>
+                                ))
+                                }
+                            </TableBody>
+                        </table>
+
+                        { servers === undefined || (error && isValidating) ?
+                            <Loading/>
+                            :
+                            length < 1 ?
+                                <NoItems/>
+                                :
+                                null
+                        }
+                    </div>
+                </Pagination>
+            </ContentWrapper>
+        </AdminTable>
+    );
+}
+
+export default ({ filters }: Props) => {
+    const hooks = useTableHooks<Filters>(filters);
+
+    return (
+        <ServersContext.Provider value={hooks}>
+            <ServersTable/>
+        </ServersContext.Provider>
+    );
+};

resources/scripts/components/admin/users/UserRouter.tsx

@@ -10,6 +10,7 @@ import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
 import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
+import UserServers from '@/components/admin/users/UserServers';
 
 interface ctx {
     user: User | undefined;
@@ -89,7 +90,7 @@ const UserRouter = () => {
                 </Route>
 
                 <Route path={`${match.path}/servers`} exact>
-                    <p>Servers</p>
+                    <UserServers/>
                 </Route>
             </Switch>
         </AdminContentBlock>

resources/scripts/components/admin/users/UserServers.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ServersTable from '@/components/admin/servers/ServersTable';
+import { Context } from '@/components/admin/users/UserRouter';
+
+function UserServers () {
+    const user = Context.useStoreState(state => state.user);
+
+    return (
+        <ServersTable filters={{ owner_id: user?.id?.toString() }}/>
+    );
+}
+
+export default UserServers;