ui(admin): fix server editing
This commit is contained in:
parent
216c464ac8
commit
9cdbbc3a00
8 changed files with 43 additions and 30 deletions
|
@ -73,7 +73,7 @@ class ServerTransformer extends Transformer
|
|||
'backups' => $model->backup_limit,
|
||||
'databases' => $model->database_limit,
|
||||
],
|
||||
'user_id' => $model->owner_id,
|
||||
'owner_id' => $model->owner_id,
|
||||
'node_id' => $model->node_id,
|
||||
'allocation_id' => $model->allocation_id,
|
||||
'nest_id' => $model->nest_id,
|
||||
|
|
|
@ -37,7 +37,7 @@ export interface Server extends Model {
|
|||
name: string;
|
||||
description: string;
|
||||
status: string;
|
||||
userId: number;
|
||||
ownerId: number;
|
||||
nodeId: number;
|
||||
allocationId: number;
|
||||
eggId: number;
|
||||
|
|
|
@ -9,10 +9,26 @@ import { Nest } from '@/api/admin/nest';
|
|||
|
||||
const isList = (data: FractalResponseList | FractalResponseData): data is FractalResponseList => data.object === 'list';
|
||||
|
||||
function transform<T, M = undefined> (data: undefined, transformer: (callback: FractalResponseData) => T, missing?: M): undefined;
|
||||
function transform<T, M> (data: FractalResponseData | undefined, transformer: (callback: FractalResponseData) => T, missing?: M): T | M | undefined;
|
||||
function transform<T, M> (data: FractalResponseList | undefined, transformer: (callback: FractalResponseData) => T, missing?: M): T[] | undefined;
|
||||
function transform<T> (data: FractalResponseData | FractalResponseList | undefined, transformer: (callback: FractalResponseData) => T, missing = undefined) {
|
||||
function transform<T, M = undefined>(
|
||||
data: undefined,
|
||||
transformer: (callback: FractalResponseData) => T,
|
||||
missing?: M,
|
||||
): undefined;
|
||||
function transform<T, M>(
|
||||
data: FractalResponseData | undefined,
|
||||
transformer: (callback: FractalResponseData) => T,
|
||||
missing?: M,
|
||||
): T | M | undefined;
|
||||
function transform<T, M>(
|
||||
data: FractalResponseList | undefined,
|
||||
transformer: (callback: FractalResponseData) => T,
|
||||
missing?: M,
|
||||
): T[] | undefined;
|
||||
function transform<T>(
|
||||
data: FractalResponseData | FractalResponseList | undefined,
|
||||
transformer: (callback: FractalResponseData) => T,
|
||||
missing = undefined,
|
||||
) {
|
||||
if (data === undefined) return undefined;
|
||||
|
||||
if (isList(data)) {
|
||||
|
@ -35,7 +51,7 @@ export default class Transformers {
|
|||
name: attributes.name,
|
||||
description: attributes.description,
|
||||
status: attributes.status,
|
||||
userId: attributes.owner_id,
|
||||
ownerId: attributes.owner_id,
|
||||
nodeId: attributes.node_id,
|
||||
allocationId: attributes.allocation_id,
|
||||
eggId: attributes.egg_id,
|
||||
|
@ -190,7 +206,7 @@ export default class Transformers {
|
|||
node: transform(attributes.relationships?.node as FractalResponseData, this.toNode),
|
||||
server: transform(attributes.relationships?.server as FractalResponseData, this.toServer),
|
||||
},
|
||||
getDisplayText (): string {
|
||||
getDisplayText(): string {
|
||||
const raw = `${this.ip}:${this.port}`;
|
||||
|
||||
return !this.alias ? raw : `${this.alias} (${raw})`;
|
||||
|
|
|
@ -50,7 +50,7 @@ function InternalForm() {
|
|||
|
||||
setFieldValue('eggId', egg.id);
|
||||
setFieldValue('startup', '');
|
||||
setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
|
||||
setFieldValue('image', Object.values(egg.dockerImages)[0] ?? '');
|
||||
}, [egg]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -16,6 +16,7 @@ export default ({ selected }: { selected?: User }) => {
|
|||
};
|
||||
|
||||
const onSelect = (user: User | null) => {
|
||||
console.log(user);
|
||||
setUser(user);
|
||||
setFieldValue('ownerId', user?.id || null);
|
||||
};
|
||||
|
|
|
@ -3,9 +3,8 @@ import type { Actions } from 'easy-peasy';
|
|||
import { useStoreActions } from 'easy-peasy';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import Button from '@/components/elements/Button';
|
||||
import { Button } from '@/components/elements/button';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import deleteServer from '@/api/admin/servers/deleteServer';
|
||||
import { useServerFromRoute } from '@/api/admin/server';
|
||||
|
@ -52,15 +51,10 @@ export default () => {
|
|||
>
|
||||
Are you sure you want to delete this server?
|
||||
</ConfirmationModal>
|
||||
<Button
|
||||
type={'button'}
|
||||
size={'small'}
|
||||
color={'red'}
|
||||
onClick={() => setVisible(true)}
|
||||
css={tw`flex items-center justify-center`}
|
||||
>
|
||||
<TrashIcon css={tw`w-5 h-5 mr-2`} /> Delete Server
|
||||
</Button>
|
||||
|
||||
<Button.Danger type="button" onClick={() => setVisible(true)} className="flex items-center justify-center">
|
||||
<TrashIcon className="mr-2 h-5 w-5" /> Delete Server
|
||||
</Button.Danger>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -12,7 +12,7 @@ import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox
|
|||
import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
|
||||
import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox';
|
||||
import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox';
|
||||
import Button from '@/components/elements/Button';
|
||||
import { Button } from '@/components/elements/button';
|
||||
|
||||
export default () => {
|
||||
const { data: server } = useServerFromRoute();
|
||||
|
@ -27,6 +27,8 @@ export default () => {
|
|||
// OOM Killer is enabled, rather than when disabled.
|
||||
values.limits.oomDisabled = !values.limits.oomDisabled;
|
||||
|
||||
console.log(values);
|
||||
|
||||
updateServer(server.id, values)
|
||||
.then(() => {
|
||||
// setServer({ ...server, ...s });
|
||||
|
@ -48,7 +50,7 @@ export default () => {
|
|||
initialValues={{
|
||||
externalId: server.externalId || '',
|
||||
name: server.name,
|
||||
ownerId: server.userId,
|
||||
ownerId: server.ownerId,
|
||||
limits: {
|
||||
memory: server.limits.memory,
|
||||
swap: server.limits.swap,
|
||||
|
@ -79,17 +81,15 @@ export default () => {
|
|||
<FeatureLimitsBox />
|
||||
<NetworkingBox />
|
||||
</div>
|
||||
|
||||
<div css={tw`flex flex-col`}>
|
||||
<ServerResourceBox />
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<ServerDeleteButton />
|
||||
<Button
|
||||
type="submit"
|
||||
size="small"
|
||||
css={tw`ml-auto`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
|
||||
<Button type="submit" className="ml-auto" disabled={isSubmitting || !isValid}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
@ -33,13 +33,14 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
|
|||
}
|
||||
|
||||
if (server.eggId === egg.id) {
|
||||
console.log(server.container);
|
||||
setFieldValue('image', server.container.image);
|
||||
setFieldValue('startup', server.container.startup || '');
|
||||
return;
|
||||
}
|
||||
|
||||
// Whenever the egg is changed, set the server's startup command to the egg's default.
|
||||
setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
|
||||
setFieldValue('image', Object.values(egg.dockerImages)[0] ?? '');
|
||||
setFieldValue('startup', '');
|
||||
}, [egg]);
|
||||
|
||||
|
@ -105,6 +106,7 @@ export function ServerImageContainer() {
|
|||
|
||||
<div css={tw`md:w-full md:flex md:flex-col`}>
|
||||
<div>
|
||||
{/* TODO: make this a proper select but allow a custom image to be specified if needed. */}
|
||||
<Field id={'image'} name={'image'} label={'Docker Image'} type={'text'} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -249,7 +251,7 @@ export default () => {
|
|||
>
|
||||
<ServerStartupForm
|
||||
egg={egg}
|
||||
// @ts-ignore
|
||||
// @ts-expect-error fix this
|
||||
setEgg={setEgg}
|
||||
server={server}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue