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

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);
+    });
+};

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),
+        });
+    });
+};

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;

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'}>
-            <CreateAllocationForm nodeId={match.params.id}/>
-        </AdminBox>
+        <>
+            <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>
+        </>
     );
 };

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>
+    );
+};

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}>

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',

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;

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,