Support modifying startup variables for servers

resources/scripts/.eslintrc.yml

@@ -39,6 +39,8 @@ rules:
   comma-dangle:
     - warn
     - always-multiline
+  spaced-comment:
+    - warn
   array-bracket-spacing:
     - warn
     - always

resources/scripts/api/server/getServer.ts

@@ -1,5 +1,6 @@
 import http, { FractalResponseData, FractalResponseList } from '@/api/http';
-import { rawDataToServerAllocation } from '@/api/transformers';
+import { rawDataToServerAllocation, rawDataToServerEggVariable } from '@/api/transformers';
+import { ServerEggVariable } from '@/api/server/types';
 
 export interface Allocation {
     id: number;
@@ -21,7 +22,6 @@ export interface Server {
     };
     invocation: string;
     description: string;
-    allocations: Allocation[];
     limits: {
         memory: number;
         swap: number;
@@ -37,6 +37,8 @@ export interface Server {
     };
     isSuspended: boolean;
     isInstalling: boolean;
+    variables: ServerEggVariable[];
+    allocations: Allocation[];
 }
 
 export const rawDataToServerObject = ({ attributes: data }: FractalResponseData): Server => ({
@@ -54,6 +56,7 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData)
     featureLimits: { ...data.feature_limits },
     isSuspended: data.is_suspended,
     isInstalling: data.is_installing,
+    variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerEggVariable),
     allocations: ((data.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToServerAllocation),
 });
 

resources/scripts/api/server/types.d.ts

@@ -8,3 +8,13 @@ export interface ServerBackup {
     createdAt: Date;
     completedAt: Date | null;
 }
+
+export interface ServerEggVariable {
+    name: string;
+    description: string;
+    envVariable: string;
+    defaultValue: string;
+    serverValue: string;
+    isEditable: boolean;
+    rules: string[];
+}

resources/scripts/api/server/updateStartupVariable.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+import { ServerEggVariable } from '@/api/server/types';
+import { rawDataToServerEggVariable } from '@/api/transformers';
+
+export default async (uuid: string, key: string, value: string): Promise<ServerEggVariable> => {
+    const { data } = await http.put(`/api/client/servers/${uuid}/startup/variable`, { key, value });
+
+    return rawDataToServerEggVariable(data);
+};

resources/scripts/api/transformers.ts

@@ -1,7 +1,7 @@
 import { Allocation } from '@/api/server/getServer';
 import { FractalResponseData } from '@/api/http';
 import { FileObject } from '@/api/server/files/loadDirectory';
-import { ServerBackup } from '@/api/server/types';
+import { ServerBackup, ServerEggVariable } from '@/api/server/types';
 
 export const rawDataToServerAllocation = (data: FractalResponseData): Allocation => ({
     id: data.attributes.id,
@@ -51,3 +51,13 @@ export const rawDataToServerBackup = ({ attributes }: FractalResponseData): Serv
     createdAt: new Date(attributes.created_at),
     completedAt: attributes.completed_at ? new Date(attributes.completed_at) : null,
 });
+
+export const rawDataToServerEggVariable = ({ attributes }: FractalResponseData): ServerEggVariable => ({
+    name: attributes.name,
+    description: attributes.description,
+    envVariable: attributes.env_variable,
+    defaultValue: attributes.default_value,
+    serverValue: attributes.server_value,
+    isEditable: attributes.is_editable,
+    rules: attributes.rules.split('|'),
+});

resources/scripts/components/server/startup/StartupContainer.tsx

@@ -3,9 +3,10 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import useServer from '@/plugins/useServer';
 import tw from 'twin.macro';
+import VariableBox from '@/components/server/startup/VariableBox';
 
 const StartupContainer = () => {
-    const { invocation } = useServer();
+    const { invocation, variables } = useServer();
 
     return (
         <PageContentBlock title={'Startup Settings'} showFlashKey={'server:startup'}>
@@ -16,6 +17,9 @@ const StartupContainer = () => {
                     </p>
                 </div>
             </TitledGreyBox>
+            <div css={tw`grid gap-8 grid-cols-2 mt-10`}>
+                {variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
+            </div>
         </PageContentBlock>
     );
 };

resources/scripts/components/server/startup/VariableBox.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { ServerEggVariable } from '@/api/server/types';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { usePermissions } from '@/plugins/usePermissions';
+import InputSpinner from '@/components/elements/InputSpinner';
+import Input from '@/components/elements/Input';
+import tw from 'twin.macro';
+import { debounce } from 'debounce';
+import updateStartupVariable from '@/api/server/updateStartupVariable';
+import useServer from '@/plugins/useServer';
+import { ServerContext } from '@/state/server';
+import useFlash from '@/plugins/useFlash';
+import FlashMessageRender from '@/components/FlashMessageRender';
+
+interface Props {
+    variable: ServerEggVariable;
+}
+
+const VariableBox = ({ variable }: Props) => {
+    const FLASH_KEY = `server:startup:${variable.envVariable}`;
+
+    const server = useServer();
+    const [ loading, setLoading ] = useState(false);
+    const [ canEdit ] = usePermissions([ 'startup.update' ]);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+
+    const setVariableValue = debounce((value: string) => {
+        setLoading(true);
+        clearFlashes(FLASH_KEY);
+
+        updateStartupVariable(server.uuid, variable.envVariable, value)
+            .then(response => setServer({
+                ...server,
+                variables: server.variables.map(v => v.envVariable === response.envVariable ? response : v),
+            }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ error, key: FLASH_KEY });
+            })
+            .then(() => setLoading(false));
+    }, 500);
+
+    return (
+        <TitledGreyBox title={variable.name}>
+            <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-4`}/>
+            <InputSpinner visible={loading}>
+                <Input
+                    onKeyUp={e => setVariableValue(e.currentTarget.value)}
+                    readOnly={!canEdit}
+                    name={variable.envVariable}
+                    defaultValue={variable.serverValue}
+                    placeholder={variable.defaultValue}
+                />
+            </InputSpinner>
+            <p css={tw`mt-1 text-xs text-neutral-400`}>
+                {variable.description}
+            </p>
+        </TitledGreyBox>
+    );
+};
+
+export default VariableBox;