ui(admin): implement basic server editing

2021-09-12 22:15:45 -06:00 · 2021-09-12 22:15:45 -06:00 · 6362731d55
commit 6362731d55
parent d0a78ec067
11 changed files with 220 additions and 90 deletions
--- a/resources/scripts/api/admin/servers/getServers.ts
+++ b/resources/scripts/api/admin/servers/getServers.ts
@ -43,6 +43,8 @@ export interface Server {
        environment: Map<string, string>;
    }

+    oomKiller: boolean;
+
    createdAt: Date;
    updatedAt: Date;

@ -90,6 +92,8 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
        environment: attributes.container.environment,
    },

+    oomKiller: attributes.oom_killer,
+
    createdAt: new Date(attributes.created_at),
    updatedAt: new Date(attributes.updated_at),

--- a/resources/scripts/api/admin/servers/updateServer.ts
+++ b/resources/scripts/api/admin/servers/updateServer.ts
@ -1,11 +1,36 @@
 import http from '@/api/http';
 import { Server, rawDataToServer } from '@/api/admin/servers/getServers';

-export default (id: number, server: Partial<Server>, include: string[] = []): Promise<Server> => {
+export interface Values {
+    externalId: string;
+    name: string;
+    ownerId: number;
+    oomKiller: boolean;
+
+    memory: number;
+    swap: number;
+    disk: number;
+    io: number;
+    cpu: number;
+    threads: string;
+
+    databases: number;
+    allocations: number;
+    backups: number;
+}
+
+export default (id: number, server: Partial<Values>, include: string[] = []): Promise<Server> => {
+    const data = {};
+
+    Object.keys(server).forEach((key) => {
+        const key2 = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+        // @ts-ignore
+        data[key2] = server[key];
+    });
+    console.log(data);
+
    return new Promise((resolve, reject) => {
-        http.patch(`/api/application/servers/${id}`, {
-            ...server,
-        }, { params: { include: include.join(',') } })
+        http.patch(`/api/application/servers/${id}`, data, { params: { include: include.join(',') } })
            .then(({ data }) => resolve(rawDataToServer(data)))
            .catch(reject);
    });
--- a/resources/scripts/components/admin/servers/ServerDeleteButton.tsx
+++ b/resources/scripts/components/admin/servers/ServerDeleteButton.tsx
@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import deleteServer from '@/api/admin/servers/deleteServer';
+
+interface Props {
+    serverId: number;
+    onDeleted: () => void;
+}
+
+export default ({ serverId, onDeleted }: Props) => {
+    const [ visible, setVisible ] = useState(false);
+    const [ loading, setLoading ] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('server');
+
+        deleteServer(serverId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'server', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete server?'}
+                buttonText={'Yes, delete server'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this server?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5`}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+            </Button>
+        </>
+    );
+};
--- a/resources/scripts/components/admin/servers/ServerRouter.tsx
+++ b/resources/scripts/components/admin/servers/ServerRouter.tsx
@ -40,7 +40,7 @@ const ServerRouter = () => {
    useEffect(() => {
        clearFlashes('server');

-        getServer(Number(match.params?.id), [ 'egg' ])
+        getServer(Number(match.params?.id), [ 'user' ])
            .then(server => setServer(server))
            .catch(error => {
                console.error(error);
@ -52,7 +52,7 @@ const ServerRouter = () => {
    if (loading || server === undefined) {
        return (
            <AdminContentBlock>
-                <FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
+                <FlashMessageRender byKey={'server'} css={tw`mb-4`}/>

                <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
                    <Spinner size={'base'}/>
@ -62,7 +62,7 @@ const ServerRouter = () => {
    }

    return (
-        <AdminContentBlock title={'Node - ' + server.name}>
+        <AdminContentBlock title={'Server - ' + server.name}>
            <div css={tw`w-full flex flex-row items-center mb-4`}>
                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2>
@ -70,7 +70,7 @@ const ServerRouter = () => {
                </div>
            </div>

-            <FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
+            <FlashMessageRender byKey={'server'} css={tw`mb-4`}/>

            <SubNavigation>
                <SubNavigationLink to={`${match.url}`} name={'Settings'}>
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@ -1,8 +1,11 @@
+import { Server } from '@/api/admin/servers/getServers';
+import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
+import { useHistory } from 'react-router-dom';
 import tw from 'twin.macro';
 import { object } from 'yup';
-import updateServer from '@/api/admin/servers/updateServer';
+import updateServer, { Values } from '@/api/admin/servers/updateServer';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
@ -13,42 +16,9 @@ import OwnerSelect from '@/components/admin/servers/OwnerSelect';
 import Button from '@/components/elements/Button';
 import FormikSwitch from '@/components/elements/FormikSwitch';

-interface Values {
-    id: number;
-    externalId: string;
-    uuid: string;
-    identifier: string;
-    name: string;
-
-    memory: number;
-    swap: number;
-    disk: number;
-    io: number;
-    cpu: number;
-    threads: string;
-
-    databases: number;
-    allocations: number;
-    backups: number;
-
-    ownerId: number;
-    nodeId: number;
-    allocationId: number;
-    nestId: number;
-    eggId: number;
-}
-
-const ServerFeatureContainer = () => {
+export function ServerFeatureContainer () {
    const { isSubmitting } = useFormikContext();

-    const server = Context.useStoreState(state => state.server);
-
-    if (server === undefined) {
-        return (
-            <></>
-        );
-    }
-
    return (
        <AdminBox title={'Feature Limits'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>
@ -77,7 +47,7 @@ const ServerFeatureContainer = () => {
                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
                    <Field
                        id={'backups'}
-                        name={'backup'}
+                        name={'backups'}
                        label={'Backup Limit'}
                        type={'number'}
                        description={'The total number of backups that can be created for this server.'}
@ -86,19 +56,11 @@ const ServerFeatureContainer = () => {
            </div>
        </AdminBox>
    );
-};
+}

-const ServerResourceContainer = () => {
+export function ServerResourceContainer () {
    const { isSubmitting } = useFormikContext();

-    const server = Context.useStoreState(state => state.server);
-
-    if (server === undefined) {
-        return (
-            <></>
-        );
-    }
-
    return (
        <AdminBox title={'Resource Management'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>
@ -171,7 +133,7 @@ const ServerResourceContainer = () => {
            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
                <div css={tw`mt-6 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
                    <FormikSwitch
-                        name={'oom'}
+                        name={'oomKiller'}
                        label={'Out of Memory Killer'}
                        description={'Enabling OOM killer may cause server processes to exit unexpectedly. '}
                    />
@ -179,19 +141,11 @@ const ServerResourceContainer = () => {
            </div>
        </AdminBox>
    );
-};
+}

-const ServerSettingsContainer = () => {
+export function ServerSettingsContainer ({ server }: { server?: Server }) {
    const { isSubmitting } = useFormikContext();

-    const server = Context.useStoreState(state => state.server);
-
-    if (server === undefined) {
-        return (
-            <></>
-        );
-    }
-
    return (
        <AdminBox title={'Settings'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>
@ -218,14 +172,16 @@ const ServerSettingsContainer = () => {

            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
                <div css={tw`mb-6 w-full md:w-1/2 md:flex md:flex-col md:pr-4 md:mb-0`}>
-                    <OwnerSelect selected={null}/>
+                    <OwnerSelect selected={server?.relations.user || null}/>
                </div>
            </div>
        </AdminBox>
    );
-};
+}
+
+export default function ServerSettingsContainer2 () {
+    const history = useHistory();

-export default () => {
    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);

    const server = Context.useStoreState(state => state.server);
@ -239,6 +195,7 @@ export default () => {

    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
        clearFlashes('server');
+        console.log(values);

        updateServer(server.id, values)
            .then(() => setServer({ ...server, ...values }))
@ -253,11 +210,10 @@ export default () => {
        <Formik
            onSubmit={submit}
            initialValues={{
-                id: server.id,
                externalId: server.externalId || '',
-                uuid: server.uuid,
-                identifier: server.identifier,
                name: server.name,
+                ownerId: server.ownerId,
+                oomKiller: server.oomKiller,

                memory: server.limits.memory,
                swap: server.limits.swap,
@ -269,12 +225,6 @@ export default () => {
                databases: server.featureLimits.databases,
                allocations: server.featureLimits.allocations,
                backups: server.featureLimits.backups,
-
-                ownerId: server.ownerId,
-                nodeId: server.nodeId,
-                allocationId: server.allocationId,
-                nestId: server.nestId,
-                eggId: server.eggId,
            }}
            validationSchema={object().shape({
            })}
@ -285,7 +235,7 @@ export default () => {
                        <div css={tw`flex flex-col lg:flex-row`}>
                            <div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}>
                                <div css={tw`flex flex-col w-full mr-0 lg:mr-2`}>
-                                    <ServerSettingsContainer/>
+                                    <ServerSettingsContainer server={server}/>
                                </div>
                                <div css={tw`flex flex-col w-full mt-4 mr-0 lg:mr-2`}>
                                    <ServerFeatureContainer/>
@ -295,8 +245,12 @@ export default () => {
                                <div css={tw`flex flex-col w-full mr-0 lg:mr-2`}>
                                    <ServerResourceContainer/>
                                </div>
-                                <div css={tw`py-2 pr-6 mt-4 rounded shadow-md bg-neutral-700`}>
+                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 px-6`}>
                                    <div css={tw`flex flex-row`}>
+                                        <ServerDeleteButton
+                                            serverId={server?.id}
+                                            onDeleted={() => history.push('/admin/servers')}
+                                        />
                                        <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
                                            Save Changes
                                        </Button>
@ -309,4 +263,4 @@ export default () => {
            }
        </Formik>
    );
-};
+}
--- a/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
@ -158,13 +158,13 @@ export default () => {
    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
        clearFlashes('server');

-        updateServer(server.id, values)
-            .then(() => setServer({ ...server, ...values }))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'server', error });
-            })
-            .then(() => setSubmitting(false));
+        // updateServer(server.id, values)
+        //     .then(() => setServer({ ...server, ...values }))
+        //     .catch(error => {
+        //         console.error(error);
+        //         clearAndAddHttpError({ key: 'server', error });
+        //     })
+        //     .then(() => setSubmitting(false));
    };

    return (