ui(admin): get server startup ui working
This commit is contained in:
Matthew Penner
parent
a6ab61adba
commit
95f3eb54db
11 changed files with 135 additions and 73 deletions
|
|
@ -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();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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(',') } })
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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, {})
|
||||
.then(eggs => setEggs(eggs))
|
||||
searchEggs(nestId, {}, [ 'variables' ])
|
||||
.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}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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`}>
|
||||
<ServerStartupLineContainer/>
|
||||
<div css={tw`flex flex-row mb-6`}>
|
||||
<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`}>*/}
|
||||
{/* {variables.map((variable, i) => (*/}
|
||||
{/* <TitledGreyBox*/}
|
||||
{/* key={i}*/}
|
||||
{/* title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}*/}
|
||||
{/* >*/}
|
||||
{/* <InputSpinner visible={false}>*/}
|
||||
{/* <Input*/}
|
||||
{/* name={variable.envVariable}*/}
|
||||
{/* defaultValue={variable.serverValue}*/}
|
||||
{/* placeholder={variable.defaultValue}*/}
|
||||
{/* />*/}
|
||||
{/* </InputSpinner>*/}
|
||||
{/* <p css={tw`mt-1 text-xs text-neutral-300`}>*/}
|
||||
{/* {variable.description}*/}
|
||||
{/* </p>*/}
|
||||
{/* </TitledGreyBox>*/}
|
||||
{/* ))}*/}
|
||||
{/*</div>*/}
|
||||
{egg !== null &&
|
||||
<div css={tw`grid gap-y-6 gap-x-8 grid-cols-1 md:grid-cols-2`}>
|
||||
{egg.relations.variables?.map((v, i) => (
|
||||
<ServerVariableContainer
|
||||
key={i}
|
||||
variable={v}
|
||||
defaultValue={server.relations?.variables.find(v2 => v.eggId === v2.eggId && v.envVariable === v2.envVariable)?.serverValue || ''}
|
||||
/>
|
||||
))}
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue