ui(admin): node changes

resources/scripts/api/admin/nodes/getNodeInformation.ts

@@ -0,0 +1,19 @@
+import http from '@/api/http';
+
+export interface NodeInformation {
+    version: string;
+    system: {
+        type: string;
+        arch: string;
+        release: string;
+        cpus: number;
+    };
+}
+
+export default (id: number): Promise<NodeInformation> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/application/nodes/${id}/information`)
+            .then(({ data }) => resolve(data))
+            .catch(reject);
+    });
+};

resources/scripts/components/admin/AdminTable.tsx

@@ -5,19 +5,11 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import { PaginatedResult } from '@/api/http';
 
-export const TableHead = ({ children }: { children: React.ReactNode }) => {
+export const TableHeader = ({ name }: { name?: string }) => {
-    return (
+    if (!name) {
-        <thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
+        return <th css={tw`px-6 py-2`}/>;
-            <tr>
+    }
-                <th css={tw`px-6 py-2`}/>
 
-                {children}
-            </tr>
-        </thead>
-    );
-};
-
-export const TableHeader = ({ name }: { name: string }) => {
     return (
         <th css={tw`px-6 py-2`}>
             <span css={tw`flex flex-row items-center cursor-pointer`}>
@@ -34,6 +26,17 @@ export const TableHeader = ({ name }: { name: string }) => {
     );
 };
 
+export const TableHead = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
+            <tr>
+                <TableHeader/>
+                {children}
+            </tr>
+        </thead>
+    );
+};
+
 export const TableBody = ({ children }: { children: React.ReactNode }) => {
     return (
         <tbody>
@@ -117,7 +120,7 @@ export function Pagination<T> ({ data: { pagination }, onPageSelect, children }:
                     Showing <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + 1}</span> to <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + pagination.count}</span> of <span css={tw`text-neutral-300`}>{pagination.total}</span> results
                 </p>
 
-                { isFirstPage && isLastPage ?
+                {isFirstPage && isLastPage ?
                     null
                     :
                     <div css={tw`flex flex-row ml-auto`}>
@@ -191,7 +194,7 @@ export const ContentWrapper = ({ checked, onSelectAllClick, children }: Params)
                     </svg>
                 </div>
 
-                <div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
+                {/* <div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`w-6 h-6 text-neutral-300`}>
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                     </svg>
@@ -199,7 +202,7 @@ export const ContentWrapper = ({ checked, onSelectAllClick, children }: Params)
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
                         <path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                     </svg>
-                </div>
+                </div> */}
             </div>
 
             {children}

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

@@ -75,7 +75,7 @@ export const InformationContainer = ({ title, initialValues, children, onSubmit
         >
             {
                 ({ isSubmitting, isValid }) => (
-                    <React.Fragment>
+                    <>
                         <AdminBox title={title} css={tw`relative`}>
                             <SpinnerOverlay visible={isSubmitting}/>
 
@@ -140,7 +140,7 @@ export const InformationContainer = ({ title, initialValues, children, onSubmit
                                 </div>
                             </Form>
                         </AdminBox>
-                    </React.Fragment>
+                    </>
                 )
             }
         </Formik>

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import AdminBox from '@/components/admin/AdminBox';
+import getNodeInformation, { NodeInformation } from '@/api/admin/nodes/getNodeInformation';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+
+const Code = ({ className, children }: { className?: string, children: React.ReactNode }) => {
+    return (
+        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }} className={className}>
+            {children}
+        </code>
+    );
+};
+
+export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const [ loading, setLoading ] = useState(true);
+    const [ info, setInfo ] = useState<NodeInformation | null>(null);
+
+    const node = Context.useStoreState(state => state.node);
+
+    if (node === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    useEffect(() => {
+        clearFlashes('node');
+
+        getNodeInformation(node.id)
+            .then(info => setInfo(info))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setLoading(false));
+    }, []);
+
+    if (loading) {
+        return (
+            <AdminBox title={'Node Information'} css={tw`relative`}>
+                <SpinnerOverlay visible={loading}/>
+            </AdminBox>
+        );
+    }
+
+    return (
+        <AdminBox title={'Node Information'}>
+            <table>
+                <tbody>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Wings Version</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.version}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Operating System</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.type}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Architecture</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.arch}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>Kernel</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.release}</Code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td css={tw`py-1 pr-6`}>CPU Threads</td>
+                        <td css={tw`py-1`}>
+                            <Code css={tw`ml-auto`}>{info?.system.cpus}</Code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            {/* TODO: Description code-block with edit option */}
+        </AdminBox>
+    );
+};

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

@@ -3,13 +3,13 @@ import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
 import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { ApplicationStore } from '@/state';
 import { Actions, useStoreActions } from 'easy-peasy';
 
 export default () => {
-    const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const [ configuration, setConfiguration ] = useState('');
 
@@ -22,6 +22,8 @@ export default () => {
     }
 
     useEffect(() => {
+        clearFlashes('node');
+
         getNodeConfiguration(node.id)
             .then((configuration) => setConfiguration(configuration))
             .catch(error => {
@@ -31,7 +33,7 @@ export default () => {
     }, []);
 
     return (
-        <div>
+        <>
             <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
                 <div css={tw`relative`}>
                     <div css={tw`absolute top-0 right-0`}>
@@ -41,7 +43,7 @@ export default () => {
                             </svg>
                         </CopyOnClick>
                     </div>
-                    <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
+                    <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md px-4 py-3 overflow-x-auto`}>
                         {configuration}
                     </pre>
                 </div>
@@ -50,6 +52,6 @@ export default () => {
             <AdminBox title={'Auto Deploy'} icon={faDragon}>
                 Never&trade;
             </AdminBox>
-        </div>
+        </>
     );
 };

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

@@ -1,27 +1,15 @@
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
-import { number, object } from 'yup';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, Formik, FormikHelpers } from 'formik';
+import { Form, useFormikContext } from 'formik';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
-import { ApplicationStore } from '@/state';
-import { Actions, useStoreActions } from 'easy-peasy';
-import updateNode from '@/api/admin/nodes/updateNode';
-
-interface Values {
-    memory: number;
-    memoryOverallocate: number;
-    disk: number;
-    diskOverallocate: number;
-}
 
 export default () => {
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { isSubmitting } = useFormikContext();
 
     const node = Context.useStoreState(state => state.node);
-    const setNode = Context.useStoreActions(actions => actions.setNode);
 
     if (node === undefined) {
         return (
@@ -29,85 +17,51 @@ export default () => {
         );
     }
 
-    const submit = ({ memory, memoryOverallocate, disk, diskOverallocate }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes('node');
-
-        updateNode(node.id, { memory, memoryOverallocate, disk, diskOverallocate })
-            .then(() => setNode({ ...node, memory, memoryOverallocate, disk, diskOverallocate }))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'node', error });
-            })
-            .then(() => setSubmitting(false));
-    };
-
     return (
-        <Formik
+        <AdminBox title={'Limits'} css={tw`w-full relative`}>
-            onSubmit={submit}
+            <SpinnerOverlay visible={isSubmitting}/>
-            initialValues={{
-                memory: node.memory,
-                memoryOverallocate: node.memoryOverallocate,
-                disk: node.disk,
-                diskOverallocate: node.diskOverallocate,
-            }}
-            validationSchema={object().shape({
-                memory: number().required(),
-                memoryOverallocate: number().required(),
-                disk: number().required(),
-                diskOverallocate: number().required(),
-            })}
-        >
-            {
-                ({ isSubmitting }) => (
-                    <React.Fragment>
-                        <AdminBox title={'Limits'} css={tw`w-full relative`}>
-                            <SpinnerOverlay visible={isSubmitting}/>
 
-                            <Form css={tw`mb-0`}>
+            <Form css={tw`mb-0`}>
-                                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'memory'}
+                            id={'memory'}
-                                            name={'memory'}
+                            name={'memory'}
-                                            label={'Memory'}
+                            label={'Memory'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
 
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'memoryOverallocate'}
+                            id={'memoryOverallocate'}
-                                            name={'memoryOverallocate'}
+                            name={'memoryOverallocate'}
-                                            label={'Memory Overallocate'}
+                            label={'Memory Overallocate'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
-                                </div>
+                </div>
 
-                                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'disk'}
+                            id={'disk'}
-                                            name={'disk'}
+                            name={'disk'}
-                                            label={'Disk'}
+                            label={'Disk'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
 
-                                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'diskOverallocate'}
+                            id={'diskOverallocate'}
-                                            name={'diskOverallocate'}
+                            name={'diskOverallocate'}
-                                            label={'Disk Overallocate'}
+                            label={'Disk Overallocate'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
-                                </div>
+                </div>
-                            </Form>
+            </Form>
-                        </AdminBox>
+        </AdminBox>
-                    </React.Fragment>
-                )
-            }
-        </Formik>
     );
 };

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

@@ -1,27 +1,15 @@
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
-import { object } from 'yup';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, Formik, FormikHelpers } from 'formik';
+import { Form, useFormikContext } from 'formik';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
-import { ApplicationStore } from '@/state';
-import { Actions, useStoreActions } from 'easy-peasy';
-import updateNode from '@/api/admin/nodes/updateNode';
-
-interface Values {
-    listenPortHTTP: number;
-    publicPortHTTP: number;
-    listenPortSFTP: number;
-    publicPortSFTP: number;
-}
 
 export default () => {
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { isSubmitting } = useFormikContext();
 
     const node = Context.useStoreState(state => state.node);
-    const setNode = Context.useStoreActions(actions => actions.setNode);
 
     if (node === undefined) {
         return (
@@ -29,81 +17,51 @@ export default () => {
         );
     }
 
-    const submit = ({ listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes('node');
-
-        updateNode(node.id, { listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
-            .then(() => setNode({ ...node, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'node', error });
-            })
-            .then(() => setSubmitting(false));
-    };
-
     return (
-        <Formik
+        <AdminBox title={'Listen'} css={tw`w-full relative`}>
-            onSubmit={submit}
+            <SpinnerOverlay visible={isSubmitting}/>
-            initialValues={{
-                listenPortHTTP: node.listenPortHTTP,
-                publicPortHTTP: node.publicPortHTTP,
-                listenPortSFTP: node.listenPortSFTP,
-                publicPortSFTP: node.publicPortSFTP,
-            }}
-            validationSchema={object().shape({
-            })}
-        >
-            {
-                ({ isSubmitting }) => (
-                    <React.Fragment>
-                        <AdminBox title={'Listen'} css={tw`w-full relative`}>
-                            <SpinnerOverlay visible={isSubmitting}/>
 
-                            <Form css={tw`mb-0`}>
+            <Form css={tw`mb-0`}>
-                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'listenPortHTTP'}
+                            id={'listenPortHTTP'}
-                                            name={'listenPortHTTP'}
+                            name={'listenPortHTTP'}
-                                            label={'HTTP Listen Port'}
+                            label={'HTTP Listen Port'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
 
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'publicPortHTTP'}
+                            id={'publicPortHTTP'}
-                                            name={'publicPortHTTP'}
+                            name={'publicPortHTTP'}
-                                            label={'HTTP Public Port'}
+                            label={'HTTP Public Port'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
-                                </div>
+                </div>
 
-                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'listenPortSFTP'}
+                            id={'listenPortSFTP'}
-                                            name={'listenPortSFTP'}
+                            name={'listenPortSFTP'}
-                                            label={'SFTP Listen Port'}
+                            label={'SFTP Listen Port'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
 
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
-                                        <Field
+                        <Field
-                                            id={'publicPortSFTP'}
+                            id={'publicPortSFTP'}
-                                            name={'publicPortSFTP'}
+                            name={'publicPortSFTP'}
-                                            label={'SFTP Public Port'}
+                            label={'SFTP Public Port'}
-                                            type={'number'}
+                            type={'number'}
-                                        />
+                        />
-                                    </div>
+                    </div>
-                                </div>
+                </div>
-                            </Form>
+            </Form>
-                        </AdminBox>
+        </AdminBox>
-                    </React.Fragment>
-                )
-            }
-        </Formik>
     );
 };

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

@@ -10,11 +10,9 @@ import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
 import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
-import AdminBox from '@/components/admin/AdminBox';
+import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
-import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
 import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
 import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
-import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
 
 interface ctx {
     node: Node | undefined;
@@ -29,15 +27,7 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
-const Code = ({ children }: { children: React.ReactNode }) => {
+const NodeRouter = () => {
-    return (
-        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }}>
-            {children}
-        </code>
-    );
-};
-
-const NodeEditContainer = () => {
     const location = useLocation();
     const match = useRouteMatch<{ id?: string }>();
 
@@ -116,27 +106,11 @@ const NodeEditContainer = () => {
 
             <Switch location={location}>
                 <Route path={`${match.path}`} exact>
-                    <AdminBox title={'Node Information'}>
+                    <NodeAboutContainer/>
-                        <p>Version <Code>1.3.1</Code></p>
-                    </AdminBox>
                 </Route>
 
                 <Route path={`${match.path}/settings`} exact>
-                    <div css={tw`flex flex-col lg:flex-row`}>
+                    <NodeSettingsContainer/>
-                        <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
-                            <NodeSettingsContainer/>
-                        </div>
-
-                        <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
-                            <div css={tw`flex w-full`}>
-                                <NodeListenContainer/>
-                            </div>
-
-                            <div css={tw`flex w-full mt-4`}>
-                                <NodeLimitContainer/>
-                            </div>
-                        </div>
-                    </div>
                 </Route>
 
                 <Route path={`${match.path}/configuration`} exact>
@@ -158,7 +132,7 @@ const NodeEditContainer = () => {
 export default () => {
     return (
         <Context.Provider>
-            <NodeEditContainer/>
+            <NodeRouter/>
         </Context.Provider>
     );
 };

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

@@ -1,29 +1,159 @@
+import Button from '@/components/elements/Button';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
-import { object, string } from 'yup';
+import { number, object, string } from 'yup';
 import updateNode from '@/api/admin/nodes/updateNode';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
+import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
 import { ApplicationStore } from '@/state';
 import { Actions, useStoreActions } from 'easy-peasy';
 import LocationSelect from '@/components/admin/nodes/LocationSelect';
 import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
 import Label from '@/components/elements/Label';
+import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
 
 interface Values {
-    public: boolean;
     name: string;
-    description: string;
     locationId: number;
     databaseHostId: number | null;
     fqdn: string;
     scheme: string;
     behindProxy: boolean;
+    public: boolean;
+
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
 }
 
+const NodeSettingsContainer = () => {
+    const { isSubmitting } = useFormikContext();
+
+    const node = Context.useStoreState(state => state.node);
+
+    if (node === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    return (
+        <AdminBox title={'Settings'} css={tw`w-full relative`}>
+            <SpinnerOverlay visible={isSubmitting}/>
+
+            <Form css={tw`mb-0`}>
+                <div css={tw`mb-6`}>
+                    <Field
+                        id={'name'}
+                        name={'name'}
+                        label={'Name'}
+                        type={'text'}
+                    />
+                </div>
+
+                <div css={tw`mb-6`}>
+                    <LocationSelect selected={node?.relations.location || null}/>
+                </div>
+
+                <div css={tw`mb-6`}>
+                    <DatabaseSelect selected={node?.relations.databaseHost || null}/>
+                </div>
+
+                <div css={tw`mb-6`}>
+                    <Field
+                        id={'fqdn'}
+                        name={'fqdn'}
+                        label={'FQDN'}
+                        type={'text'}
+                    />
+                </div>
+
+                <div css={tw`mt-6`}>
+                    <Label htmlFor={'scheme'}>SSL</Label>
+
+                    <div>
+                        <label css={tw`inline-flex items-center mr-2`}>
+                            <FormikField
+                                name={'scheme'}
+                                type={'radio'}
+                                value={'https'}
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                        </label>
+
+                        <label css={tw`inline-flex items-center ml-2`}>
+                            <FormikField
+                                name={'scheme'}
+                                type={'radio'}
+                                value={'http'}
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div css={tw`mt-6`}>
+                    <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
+
+                    <div>
+                        <label css={tw`inline-flex items-center mr-2`}>
+                            <FormikField
+                                name={'behindProxy'}
+                                type={'radio'}
+                                value={false}
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>No</span>
+                        </label>
+
+                        <label css={tw`inline-flex items-center ml-2`}>
+                            <FormikField
+                                name={'behindProxy'}
+                                type={'radio'}
+                                value
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>Yes</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div css={tw`mt-6`}>
+                    <Label htmlFor={'public'}>Automatic Allocation</Label>
+
+                    <div>
+                        <label css={tw`inline-flex items-center mr-2`}>
+                            <FormikField
+                                name={'public'}
+                                type={'radio'}
+                                value={false}
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                        </label>
+
+                        <label css={tw`inline-flex items-center ml-2`}>
+                            <FormikField
+                                name={'public'}
+                                type={'radio'}
+                                value
+                            />
+                            <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                        </label>
+                    </div>
+                </div>
+            </Form>
+        </AdminBox>
+    );
+};
+
 export default () => {
     const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -36,11 +166,11 @@ export default () => {
         );
     }
 
-    const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('node');
 
-        updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, scheme, behindProxy })
+        updateNode(node.id, values)
-            .then(() => setNode({ ...node, name, description, locationId, fqdn, scheme, behindProxy }))
+            .then(() => setNode({ ...node, ...values }))
             .catch(error => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'node', error });
@@ -52,112 +182,63 @@ export default () => {
         <Formik
             onSubmit={submit}
             initialValues={{
-                public: node.public,
                 name: node.name,
-                description: node.description || '',
                 locationId: node.locationId,
                 databaseHostId: node.databaseHostId,
                 fqdn: node.fqdn,
                 scheme: node.scheme,
                 behindProxy: node.behindProxy,
+                public: node.public,
+
+                listenPortHTTP: node.listenPortHTTP,
+                publicPortHTTP: node.publicPortHTTP,
+                listenPortSFTP: node.listenPortSFTP,
+                publicPortSFTP: node.publicPortSFTP,
+
+                memory: node.memory,
+                memoryOverallocate: node.memoryOverallocate,
+                disk: node.disk,
+                diskOverallocate: node.diskOverallocate,
             }}
             validationSchema={object().shape({
                 name: string().required().max(191),
-                description: string().max(255),
+
+                listenPortHTTP: number().required(),
+                publicPortHTTP: number().required(),
+                listenPortSFTP: number().required(),
+                publicPortSFTP: number().required(),
+
+                memory: number().required(),
+                memoryOverallocate: number().required(),
+                disk: number().required(),
+                diskOverallocate: number().required(),
             })}
         >
             {
-                ({ isSubmitting }) => (
+                ({ isSubmitting, isValid }) => (
-                    <React.Fragment>
+                    <div css={tw`flex flex-col lg:flex-row`}>
-                        <AdminBox title={'Settings'} css={tw`w-full relative`}>
+                        <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
-                            <SpinnerOverlay visible={isSubmitting}/>
+                            <NodeSettingsContainer/>
+                        </div>
 
-                            <Form css={tw`mb-0`}>
+                        <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
-                                <div css={tw`mb-6`}>
+                            <div css={tw`flex w-full`}>
-                                    <Field
+                                <NodeListenContainer/>
-                                        id={'name'}
+                            </div>
-                                        name={'name'}
+
-                                        label={'Name'}
+                            <div css={tw`flex w-full mt-4`}>
-                                        type={'text'}
+                                <NodeLimitContainer/>
-                                    />
+                            </div>
+
+                            <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
+                                <div css={tw`flex flex-row`}>
+                                    <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                        Save Changes
+                                    </Button>
                                 </div>
-
+                            </div>
-                                <div css={tw`mb-6`}>
+                        </div>
-                                    <Field
+                    </div>
-                                        id={'description'}
-                                        name={'description'}
-                                        label={'Description'}
-                                        type={'text'}
-                                    />
-                                </div>
-
-                                <div css={tw`mb-6`}>
-                                    <LocationSelect selected={node?.relations.location || null}/>
-                                </div>
-
-                                <div css={tw`mb-6`}>
-                                    <DatabaseSelect selected={node?.relations.databaseHost || null}/>
-                                </div>
-
-                                <div css={tw`mb-6`}>
-                                    <Field
-                                        id={'fqdn'}
-                                        name={'fqdn'}
-                                        label={'FQDN'}
-                                        type={'text'}
-                                    />
-                                </div>
-
-                                <div css={tw`mt-6`}>
-                                    <Label htmlFor={'scheme'}>SSL</Label>
-
-                                    <div>
-                                        <label css={tw`inline-flex items-center mr-2`}>
-                                            <FormikField
-                                                name={'scheme'}
-                                                type={'radio'}
-                                                value={'https'}
-                                            />
-                                            <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
-                                        </label>
-
-                                        <label css={tw`inline-flex items-center ml-2`}>
-                                            <FormikField
-                                                name={'scheme'}
-                                                type={'radio'}
-                                                value={'http'}
-                                            />
-                                            <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
-                                        </label>
-                                    </div>
-                                </div>
-
-                                <div css={tw`mt-6`}>
-                                    <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
-
-                                    <div>
-                                        <label css={tw`inline-flex items-center mr-2`}>
-                                            <FormikField
-                                                name={'behindProxy'}
-                                                type={'radio'}
-                                                value={false}
-                                            />
-                                            <span css={tw`text-neutral-300 ml-2`}>No</span>
-                                        </label>
-
-                                        <label css={tw`inline-flex items-center ml-2`}>
-                                            <FormikField
-                                                name={'behindProxy'}
-                                                type={'radio'}
-                                                value
-                                            />
-                                            <span css={tw`text-neutral-300 ml-2`}>Yes</span>
-                                        </label>
-                                    </div>
-                                </div>
-                            </Form>
-                        </AdminBox>
-                    </React.Fragment>
                 )
             }
         </Formik>

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

@@ -101,7 +101,8 @@ const NodesContainer = () => {
                                             <TableHeader name={'FQDN'}/>
                                             <TableHeader name={'Total Memory'}/>
                                             <TableHeader name={'Total Disk'}/>
-                                            <th css={tw`px-6 py-2`}/>
+                                            <TableHeader/>
+                                            <TableHeader/>
                                         </TableHead>
 
                                         <TableBody>
@@ -147,7 +148,7 @@ const NodesContainer = () => {
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
 
                                                         <td css={tw`px-6 whitespace-nowrap`}>
-                                                            { node.scheme === 'https' ?
+                                                            {node.scheme === 'https' ?
                                                                 <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
                                                                     Secure
                                                                 </span>
@@ -157,6 +158,13 @@ const NodesContainer = () => {
                                                                 </span>
                                                             }
                                                         </td>
+
+                                                        <td css={tw`px-6 whitespace-nowrap`}>
+                                                            {/* TODO: Change color based off of online/offline status */}
+                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}>
+                                                                <path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
+                                                            </svg>
+                                                        </td>
                                                     </TableRow>
                                                 ))
                                             }

resources/scripts/routers/AdminRouter.tsx

@@ -15,7 +15,7 @@ import NewDatabaseContainer from '@/components/admin/databases/NewDatabaseContai
 import DatabaseEditContainer from '@/components/admin/databases/DatabaseEditContainer';
 import NodesContainer from '@/components/admin/nodes/NodesContainer';
 import NewNodeContainer from '@/components/admin/nodes/NewNodeContainer';
-import NodeEditContainer from '@/components/admin/nodes/NodeEditContainer';
+import NodeRouter from '@/components/admin/nodes/NodeRouter';
 import LocationsContainer from '@/components/admin/locations/LocationsContainer';
 import LocationEditContainer from '@/components/admin/locations/LocationEditContainer';
 import ServersContainer from '@/components/admin/servers/ServersContainer';
@@ -226,7 +226,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                         <Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/>
                         <Route
                             path={`${match.path}/nodes/:id`}
-                            component={NodeEditContainer}
+                            component={NodeRouter}
                         />
 
                         <Route path={`${match.path}/servers`} component={ServersContainer} exact/>