ui(admin): get server startup ui working

app/Transformers/Api/Application/ServerVariableTransformer.php

@@ -24,9 +24,9 @@ class ServerVariableTransformer extends Transformer
         return ServerVariable::RESOURCE_NAME;
     }
 
-    public function transform(EggVariable $variable): array
+    public function transform(EggVariable $model): array
     {
-        return $variable->toArray();
+        return $model->toArray();
     }
 
     /**

resources/scripts/api/admin/nests/searchEggs.ts

@@ -5,7 +5,7 @@ interface Filters {
     name?: string;
 }
 
-export default (nestId: number, filters?: Filters): Promise<Egg[]> => {
+export default (nestId: number, filters?: Filters, include: string[] = []): Promise<Egg[]> => {
     const params = {};
     if (filters !== undefined) {
         Object.keys(filters).forEach(key => {
@@ -15,7 +15,7 @@ export default (nestId: number, filters?: Filters): Promise<Egg[]> => {
     }
 
     return new Promise((resolve, reject) => {
-        http.get(`/api/application/nests/${nestId}/eggs`, { params: { ...params } })
+        http.get(`/api/application/nests/${nestId}/eggs`, { params: { include: include.join(','), ...params } })
             .then(response => resolve(
                 (response.data.data || []).map(rawDataToEgg)
             ))

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

@@ -7,6 +7,38 @@ import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
 import { User, rawDataToUser } from '@/api/admin/users/getUsers';
 
+export interface ServerVariable {
+    id: number;
+    eggId: number;
+    name: string;
+    description: string;
+    envVariable: string;
+    defaultValue: string;
+    userViewable: boolean;
+    userEditable: boolean;
+    rules: string;
+    required: boolean;
+    serverValue: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+const rawDataToServerVariable = ({ attributes }: FractalResponseData): ServerVariable => ({
+    id: attributes.id,
+    eggId: attributes.egg_id,
+    name: attributes.name,
+    description: attributes.description,
+    envVariable: attributes.env_variable,
+    defaultValue: attributes.default_value,
+    userViewable: attributes.user_viewable,
+    userEditable: attributes.user_editable,
+    rules: attributes.rules,
+    required: attributes.required,
+    serverValue: attributes.server_value,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+});
+
 export interface Server {
     id: number;
     externalId: string | null
@@ -53,6 +85,7 @@ export interface Server {
         egg?: Egg;
         node?: Node;
         user?: User;
+        variables: ServerVariable[];
     }
 }
 
@@ -102,6 +135,7 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
         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,
+        variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerVariable),
     },
 }) as Server;
 

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

@@ -31,7 +31,6 @@ export default (id: number, server: Partial<Values>, include: string[] = []): Pr
         // @ts-ignore
         data[key2] = server[key];
     });
-    console.log(data);
 
     return new Promise((resolve, reject) => {
         http.patch(`/api/application/servers/${id}`, data, { params: { include: include.join(',') } })

resources/scripts/components/admin/AdminBox.tsx

@@ -19,7 +19,7 @@ const AdminBox = ({ icon, title, className, padding, children }: Props) => {
 
     return (
         <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
-            <div css={tw`bg-neutral-900 rounded-t px-6 py-3 border-b border-black`}>
+            <div css={tw`bg-neutral-900 rounded-t px-4 py-3 border-b border-black`}>
                 {typeof title === 'string' ?
                     <p css={tw`text-sm uppercase`}>
                         {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
@@ -28,7 +28,7 @@ const AdminBox = ({ icon, title, className, padding, children }: Props) => {
                     title
                 }
             </div>
-            <div css={padding ? tw`px-6 py-4` : undefined}>
+            <div css={padding ? tw`px-4 py-3` : undefined}>
                 {children}
             </div>
         </div>

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

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { Egg } from '@/api/admin/eggs/getEgg';
 import searchEggs from '@/api/admin/nests/searchEggs';
 
-export default ({ nestId, eggId }: { nestId: number | null; eggId?: number }) => {
+export default ({ nestId, egg, setEgg }: { nestId: number | null; egg: Egg | null, setEgg: (value: Egg | null) => void }) => {
     const [ eggs, setEggs ] = useState<Egg[]>([]);
 
     useEffect(() => {
@@ -12,15 +12,27 @@ export default ({ nestId, eggId }: { nestId: number | null; eggId?: number }) =>
             return;
         }
 
-        searchEggs(nestId, {})
+        searchEggs(nestId, {}, [ 'variables' ])
-            .then(eggs => setEggs(eggs))
+            .then(eggs => {
+                setEggs(eggs);
+                if (eggs.length < 1) {
+                    setEgg(null);
+                    return;
+                }
+                setEgg(eggs[0]);
+            })
             .catch(error => console.error(error));
     }, [ nestId ]);
 
     return (
         <>
             <Label>Egg</Label>
-            <Select defaultValue={eggId || undefined} id={'eggId'} name={'eggId'}>
+            <Select
+                defaultValue={egg?.id || undefined}
+                id={'eggId'}
+                name={'eggId'}
+                onChange={e => setEgg(eggs.find(egg => egg.id.toString() === e.currentTarget.value) || null)}
+            >
                 {eggs.map(v => (
                     <option key={v.id} value={v.id.toString()}>
                         {v.name}

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

@@ -8,8 +8,6 @@ export default ({ nestId, setNestId }: { nestId: number | null; setNestId: (valu
     const [ nests, setNests ] = useState<Nest[] | null>(null);
 
     useEffect(() => {
-        console.log(nestId || undefined);
-
         searchNests({})
             .then(nests => setNests(nests))
             .catch(error => console.error(error));

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

@@ -40,7 +40,7 @@ const ServerRouter = () => {
     useEffect(() => {
         clearFlashes('server');
 
-        getServer(Number(match.params?.id), [ 'allocations', 'user' ])
+        getServer(Number(match.params?.id), [ 'allocations', 'user', 'variables' ])
             .then(server => setServer(server))
             .catch(error => {
                 console.error(error);
@@ -108,10 +108,10 @@ const ServerRouter = () => {
 
             <Switch location={location}>
                 <Route path={`${match.path}`} exact>
-                    <ServerSettingsContainer/>
+                    <ServerSettingsContainer server={server}/>
                 </Route>
                 <Route path={`${match.path}/startup`} exact>
-                    <ServerStartupContainer/>
+                    <ServerStartupContainer server={server}/>
                 </Route>
                 <Route path={`${match.path}/manage`} exact>
                     <ServerManageContainer/>

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

@@ -236,20 +236,13 @@ export function ServerAllocationsContainer ({ server }: { server: Server }) {
 
 type Values2 = Omit<Values, 'oomDisabled'> & { oomKiller: boolean };
 
-export default function ServerSettingsContainer2 () {
+export default function ServerSettingsContainer2 ({ server }: { server: Server }) {
     const history = useHistory();
 
     const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
-    const server = Context.useStoreState(state => state.server);
     const setServer = Context.useStoreActions(actions => actions.setServer);
 
-    if (server === undefined) {
-        return (
-            <></>
-        );
-    }
-
     const submit = (values: Values2, { setSubmitting, setFieldValue }: FormikHelpers<Values2>) => {
         clearFlashes('server');
 
@@ -299,7 +292,7 @@ export default function ServerSettingsContainer2 () {
         >
             {({ isSubmitting, isValid }) => (
                 <Form>
-                    <div css={tw`grid grid-cols-2 gap-x-8`}>
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
                         <div css={tw`flex flex-col`}>
                             <div css={tw`flex mb-6`}>
                                 <ServerSettingsContainer server={server}/>
@@ -309,9 +302,15 @@ export default function ServerSettingsContainer2 () {
                                 <ServerFeatureContainer/>
                             </div>
 
-                            <div css={tw`flex mb-6`}>
+                            <div css={tw`flex`}>
                                 <ServerAllocationsContainer server={server}/>
                             </div>
+                        </div>
+
+                        <div css={tw`flex flex-col`}>
+                            <div css={tw`flex mb-6`}>
+                                <ServerResourceContainer/>
+                            </div>
 
                             <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
                                 <div css={tw`flex flex-row`}>
@@ -325,12 +324,6 @@ export default function ServerSettingsContainer2 () {
                                 </div>
                             </div>
                         </div>
-
-                        <div css={tw`flex flex-col`}>
-                            <div css={tw`flex mb-8`}>
-                                <ServerResourceContainer/>
-                            </div>
-                        </div>
                     </div>
                 </Form>
             )}

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

@@ -1,7 +1,10 @@
+import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
+import { Server } from '@/api/admin/servers/getServers';
 import EggSelect from '@/components/admin/servers/EggSelect';
 import NestSelect from '@/components/admin/servers/NestSelect';
 import FormikSwitch from '@/components/elements/FormikSwitch';
-import React, { useState } from 'react';
+import InputSpinner from '@/components/elements/InputSpinner';
+import React, { useEffect, useState } from 'react';
 import Button from '@/components/elements/Button';
 import Input from '@/components/elements/Input';
 import AdminBox from '@/components/admin/AdminBox';
@@ -10,10 +13,10 @@ import { object } from 'yup';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Form, Formik, useFormikContext } from 'formik';
-import { Context } from '@/components/admin/servers/ServerRouter';
 import { ApplicationStore } from '@/state';
 import { Actions, useStoreActions } from 'easy-peasy';
 import Label from '@/components/elements/Label';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
 
 // interface Values {
 //     startupCommand: string;
@@ -23,7 +26,7 @@ import Label from '@/components/elements/Label';
 //     skipScripts: boolean;
 // }
 
-function ServerStartupLineContainer () {
+function ServerStartupLineContainer ({ egg }: { egg: Egg }) {
     const { isSubmitting } = useFormikContext();
 
     return (
@@ -43,17 +46,17 @@ function ServerStartupLineContainer () {
 
                 <div>
                     <Label>Default Startup Command</Label>
-                    <Input disabled/>
+                    <Input value={egg.startup} readOnly/>
                 </div>
             </Form>
         </AdminBox>
     );
 }
 
-function ServerServiceContainer ({ nestId: nestId2, eggId }: { nestId: number | null; eggId: number | null }) {
+function ServerServiceContainer ({ server, egg, setEgg }: { server: Server, egg: Egg | null, setEgg: (value: Egg | null) => void }) {
     const { isSubmitting } = useFormikContext();
 
-    const [ nestId, setNestId ] = useState<number | null>(nestId2);
+    const [ nestId, setNestId ] = useState<number | null>(server.nestId);
 
     return (
         <AdminBox title={'Service Configuration'} css={tw`relative w-full`}>
@@ -65,7 +68,7 @@ function ServerServiceContainer ({ nestId: nestId2, eggId }: { nestId: number |
                 </div>
 
                 <div css={tw`mb-6`}>
-                    <EggSelect nestId={nestId} eggId={eggId || undefined}/>
+                    <EggSelect nestId={nestId} egg={egg} setEgg={setEgg}/>
                 </div>
 
                 <div css={tw`bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
@@ -103,23 +106,50 @@ function ServerImageContainer () {
     );
 }
 
-export default function ServerStartupContainer () {
+function ServerVariableContainer ({ variable, defaultValue }: { variable: EggVariable, defaultValue: string }) {
+    const [ value, setValue ] = useState<string>('');
+
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [ defaultValue ]);
+
+    return (
+        <AdminBox title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}>
+            <InputSpinner visible={false}>
+                <Input
+                    name={variable.envVariable}
+                    placeholder={variable.defaultValue}
+                    type={'text'}
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            </InputSpinner>
+            <p css={tw`mt-1 text-xs text-neutral-300`}>
+                {variable.description}
+            </p>
+        </AdminBox>
+    );
+}
+
+export default function ServerStartupContainer ({ server }: { server: Server }) {
     const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
-    // const [ egg, setEgg ] = useState<Egg | null>(null);
+    const [ egg, setEgg ] = useState<Egg | null>(null);
 
-    const server = Context.useStoreState(state => state.server);
+    useEffect(() => {
+        getEgg(server.eggId, [ 'variables' ])
+            .then(egg => setEgg(egg))
+            .catch(error => console.error(error));
+    }, []);
+
+    if (egg === null) {
+        return (<></>);
+    }
 
     const submit = () => {
         clearFlashes('server');
     };
 
-    if (server === undefined) {
-        return (
-            <></>
-        );
-    }
-
     return (
         <Formik
             onSubmit={submit}
@@ -133,40 +163,36 @@ export default function ServerStartupContainer () {
         >
             {({ isSubmitting, isValid }) => (
                 <div css={tw`flex flex-col`}>
-                    <div css={tw`flex flex-row mb-8`}>
+                    <div css={tw`flex flex-row mb-6`}>
-                        <ServerStartupLineContainer/>
+                        <ServerStartupLineContainer egg={egg}/>
                     </div>
 
-                    <div css={tw`grid grid-cols-2 gap-x-8 mb-8`}>
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 md:gap-x-8 gap-y-6 md:gap-y-0 mb-6`}>
                         <div css={tw`flex`}>
-                            <ServerServiceContainer nestId={server?.nestId || null} eggId={server?.eggId || null}/>
+                            <ServerServiceContainer
+                                server={server}
+                                egg={egg}
+                                setEgg={setEgg}
+                            />
                         </div>
                         <div css={tw`flex`}>
                             <ServerImageContainer/>
                         </div>
                     </div>
 
-                    {/*<div css={tw`grid gap-8 md:grid-cols-2`}>*/}
+                    {egg !== null &&
-                    {/*    {variables.map((variable, i) => (*/}
+                    <div css={tw`grid gap-y-6 gap-x-8 grid-cols-1 md:grid-cols-2`}>
-                    {/*        <TitledGreyBox*/}
+                        {egg.relations.variables?.map((v, i) => (
-                    {/*            key={i}*/}
+                            <ServerVariableContainer
-                    {/*            title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}*/}
+                                key={i}
-                    {/*        >*/}
+                                variable={v}
-                    {/*            <InputSpinner visible={false}>*/}
+                                defaultValue={server.relations?.variables.find(v2 => v.eggId === v2.eggId && v.envVariable === v2.envVariable)?.serverValue || ''}
-                    {/*                <Input*/}
+                            />
-                    {/*                    name={variable.envVariable}*/}
+                        ))}
-                    {/*                    defaultValue={variable.serverValue}*/}
+                    </div>
-                    {/*                    placeholder={variable.defaultValue}*/}
+                    }
-                    {/*                />*/}
-                    {/*            </InputSpinner>*/}
-                    {/*            <p css={tw`mt-1 text-xs text-neutral-300`}>*/}
-                    {/*                {variable.description}*/}
-                    {/*            </p>*/}
-                    {/*        </TitledGreyBox>*/}
-                    {/*    ))}*/}
-                    {/*</div>*/}
 
-                    <div css={tw`py-2 pr-6 mt-4 rounded shadow-md bg-neutral-700`}>
+                    <div css={tw`bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6`}>
                         <div css={tw`flex flex-row`}>
                             <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
                                 Save Changes

resources/scripts/routers/AdminRouter.tsx

@@ -196,7 +196,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
             </Sidebar>
 
             <Container collapsed={collapsed}>
-                <div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 py-6 md:py-12`} style={{ maxWidth: '86rem' }}>
+                <div css={tw`md:min-h-screen w-full flex flex-col px-6 md:px-16 pt-6 md:pt-12`} style={{ maxWidth: '86rem' }}>
                     {/* <TransitionRouter> */}
                     <Switch location={location}>
                         <Route path={`${match.path}`} component={OverviewContainer} exact/>