dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

ui(admin): get server startup ui working

Browse Source
This commit is contained in:
Matthew Penner 2021-09-15 21:19:39 -06:00
parent a6ab61adba
commit 95f3eb54db
No known key found for this signature in database
GPG Key ID: 030E4AB751DC756F
11 changed files with 135 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Transformers/Api/Application/ServerVariableTransformer.php
View File

@ -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();
}
/**

4
resources/scripts/api/admin/nests/searchEggs.ts
View File

@ -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)
))

34
resources/scripts/api/admin/servers/getServers.ts
View File

@ -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;

1
resources/scripts/api/admin/servers/updateServer.ts
View File

@ -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(',') } })

4
resources/scripts/components/admin/AdminBox.tsx
View File

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

20
resources/scripts/components/admin/servers/EggSelect.tsx
View File

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

2
resources/scripts/components/admin/servers/NestSelect.tsx
View File

@ -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));

6
resources/scripts/components/admin/servers/ServerRouter.tsx
View File

@ -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/>

25
resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
View File

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

106
resources/scripts/components/admin/servers/ServerStartupContainer.tsx
View File

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

2
resources/scripts/routers/AdminRouter.tsx
View File

@ -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/>