ui(admin): server editing improvements

2021-09-15 11:09:54 -06:00 · 2021-09-15 11:09:54 -06:00 · 6df2368264
commit 6df2368264
parent 23a160b9e1
9 changed files with 153 additions and 90 deletions
--- a/app/Transformers/Api/Application/EggVariableTransformer.php
+++ b/app/Transformers/Api/Application/EggVariableTransformer.php
@ -2,7 +2,6 @@

 namespace Pterodactyl\Transformers\Api\Application;

-use Pterodactyl\Models\Egg;
 use Pterodactyl\Models\EggVariable;
 use Pterodactyl\Transformers\Api\Transformer;

@ -10,7 +9,7 @@ class EggVariableTransformer extends Transformer
 {
    public function getResourceName(): string
    {
-        return Egg::RESOURCE_NAME;
+        return EggVariable::RESOURCE_NAME;
    }

    public function transform(EggVariable $model): array
--- a/package.json
+++ b/package.json
@ -43,7 +43,7 @@
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/react-fontawesome": "^0.1.15",
        "@hot-loader/react-dom": "^16.14.0",
-        "axios": "^0.21.3",
+        "axios": "^0.21.4",
        "chart.js": "^2.9.4",
        "date-fns": "^2.23.0",
        "debounce": "^1.2.1",
@ -53,7 +53,7 @@
        "feature": "link:./resources/scripts/components/server/features",
        "formik": "^2.2.9",
        "history": "^4.10.1",
-        "i18next": "^20.6.0",
+        "i18next": "^20.6.1",
        "i18next-chained-backend": "^3.0.2",
        "i18next-localstorage-backend": "^3.1.3",
        "i18next-xhr-backend": "^3.2.2",
@ -77,10 +77,10 @@
        "styled-components-breakpoint": "^3.0.0-preview.20",
        "swr": "^1.0.1",
        "uuid": "^3.4.0",
-        "xterm": "^4.13.0",
+        "xterm": "^4.14.1",
        "xterm-addon-attach": "^0.6.0",
        "xterm-addon-fit": "^0.5.0",
-        "xterm-addon-search": "^0.8.0",
+        "xterm-addon-search": "^0.8.1",
        "xterm-addon-search-bar": "^0.2.0",
        "xterm-addon-web-links": "^0.4.0",
        "yup": "^0.32.9"
@ -103,7 +103,7 @@
        "@types/debounce": "^1.2.0",
        "@types/events": "^3.0.0",
        "@types/history": "^4.7.9",
-        "@types/node": "^16.7.10",
+        "@types/node": "^16.9.1",
        "@types/qrcode.react": "^1.0.2",
        "@types/query-string": "^6.3.0",
        "@types/react": "^16.14.15",
@ -144,7 +144,7 @@
        "tailwindcss": "^2.2.7",
        "terser-webpack-plugin": "^4.2.3",
        "twin.macro": "^2.7.0",
-        "typescript": "^4.3.5",
+        "typescript": "^4.4.3",
        "webpack": "^4.46.0",
        "webpack-assets-manifest": "^4.0.6",
        "webpack-bundle-analyzer": "^4.4.2",
--- a/resources/scripts/api/admin/eggs/getEgg.ts
+++ b/resources/scripts/api/admin/eggs/getEgg.ts
@ -1,4 +1,36 @@
-import http, { FractalResponseData } from '@/api/http';
+import { Nest } from '@/api/admin/nests/getNests';
+import { rawDataToServer, Server } from '@/api/admin/servers/getServers';
+import http, { FractalResponseData, FractalResponseList } from '@/api/http';
+
+export interface EggVariable {
+    id: number;
+    eggId: number;
+    name: string;
+    description: string;
+    envVariable: string;
+    defaultValue: string;
+    userViewable: boolean;
+    userEditable: boolean;
+    rules: string;
+    required: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+
+const rawDataToEggVariable = ({ attributes }: FractalResponseData): EggVariable => ({
+    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,
+    createdAt: new Date(attributes.created_at),
+    updatedAt: new Date(attributes.updated_at),
+});

 export interface Egg {
    id: number;
@ -22,6 +54,12 @@ export interface Egg {
    scriptInstall: string | null;
    createdAt: Date;
    updatedAt: Date;
+
+    relations: {
+        nest?: Nest;
+        servers?: Server[];
+        variables?: EggVariable[];
+    };
 }

 export const rawDataToEgg = ({ attributes }: FractalResponseData): Egg => ({
@ -46,11 +84,17 @@ export const rawDataToEgg = ({ attributes }: FractalResponseData): Egg => ({
    scriptInstall: attributes.script?.install,
    createdAt: new Date(attributes.created_at),
    updatedAt: new Date(attributes.updated_at),
+
+    relations: {
+        nest: undefined,
+        servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(rawDataToServer),
+        variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToEggVariable),
+    },
 });

-export default (id: number): Promise<Egg> => {
+export default (id: number, include: string[] = []): Promise<Egg> => {
    return new Promise((resolve, reject) => {
-        http.get(`/api/application/eggs/${id}`)
+        http.get(`/api/application/eggs/${id}`, { params: { include: include.join(',') } })
            .then(({ data }) => resolve(rawDataToEgg(data)))
            .catch(reject);
    });
--- a/resources/scripts/api/admin/servers/getServers.ts
+++ b/resources/scripts/api/admin/servers/getServers.ts
@ -22,6 +22,7 @@ export interface Server {
        io: number;
        cpu: number;
        threads: string | null;
+        oomDisabled: boolean;
    }

    featureLimits: {
@ -43,8 +44,6 @@ export interface Server {
        environment: Map<string, string>;
    }

-    oomKiller: boolean;
-
    createdAt: Date;
    updatedAt: Date;

@ -71,6 +70,7 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
        io: attributes.limits.io,
        cpu: attributes.limits.cpu,
        threads: attributes.limits.threads,
+        oomDisabled: attributes.limits.oom_disabled,
    },

    featureLimits: {
@ -92,8 +92,6 @@ 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
@ -5,7 +5,6 @@ export interface Values {
    externalId: string;
    name: string;
    ownerId: number;
-    oomKiller: boolean;

    memory: number;
    swap: number;
@ -13,6 +12,7 @@ export interface Values {
    io: number;
    cpu: number;
    threads: string;
+    oomDisabled: boolean;

    databases: number;
    allocations: number;
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@ -1,5 +1,6 @@
 import { Server } from '@/api/admin/servers/getServers';
 import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
+import { faBalanceScale, faCogs, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import { useHistory } from 'react-router-dom';
@ -20,7 +21,7 @@ export function ServerFeatureContainer () {
    const { isSubmitting } = useFormikContext();

    return (
-        <AdminBox title={'Feature Limits'} css={tw`relative w-full`}>
+        <AdminBox icon={faConciergeBell} title={'Feature Limits'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
@ -62,7 +63,7 @@ export function ServerResourceContainer () {
    const { isSubmitting } = useFormikContext();

    return (
-        <AdminBox title={'Resource Management'} css={tw`relative w-full`}>
+        <AdminBox icon={faBalanceScale} title={'Resource Management'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
@ -147,7 +148,7 @@ export function ServerSettingsContainer ({ server }: { server?: Server }) {
    const { isSubmitting } = useFormikContext();

    return (
-        <AdminBox title={'Settings'} css={tw`relative w-full`}>
+        <AdminBox icon={faCogs} title={'Settings'} css={tw`relative w-full`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
@ -179,6 +180,18 @@ export function ServerSettingsContainer ({ server }: { server?: Server }) {
    );
 }

+export function ServerAllocationsContainer () {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox icon={faNetworkWired} title={'Allocations'} css={tw`relative w-full`}>
+            <SpinnerOverlay visible={isSubmitting}/>
+        </AdminBox>
+    );
+}
+
+type Values2 = Omit<Values, 'oomDisabled'> & { oomKiller: boolean };
+
 export default function ServerSettingsContainer2 () {
    const history = useHistory();

@ -193,11 +206,10 @@ export default function ServerSettingsContainer2 () {
        );
    }

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

-        updateServer(server.id, values)
+        updateServer(server.id, { ...values, oomDisabled: !values.oomKiller })
            .then(() => setServer({ ...server, ...values }))
            .catch(error => {
                console.error(error);
@ -213,7 +225,6 @@ export default function ServerSettingsContainer2 () {
                externalId: server.externalId || '',
                name: server.name,
                ownerId: server.ownerId,
-                oomKiller: server.oomKiller,

                memory: server.limits.memory,
                swap: server.limits.swap,
@ -221,6 +232,9 @@ export default function ServerSettingsContainer2 () {
                io: server.limits.io,
                cpu: server.limits.cpu,
                threads: server.limits.threads || '',
+                // Yes, this is named differently on purpose. Naming it like this makes the toggle switch
+                // be in an ON state when the oom killer is enabled, instead of when its disabled.
+                oomKiller: !server.limits.oomDisabled,

                databases: server.featureLimits.databases,
                allocations: server.featureLimits.allocations,
@ -229,23 +243,23 @@ export default function ServerSettingsContainer2 () {
            validationSchema={object().shape({
            })}
        >
-            {
-                ({ isSubmitting, isValid }) => (
+            {({ isSubmitting, isValid }) => (
                <Form>
-                        <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`}>
+                    <div css={tw`grid grid-cols-2 gap-x-8`}>
+                        <div css={tw`flex flex-col`}>
+                            <div css={tw`flex mb-6`}>
                                <ServerSettingsContainer server={server}/>
                            </div>
-                                <div css={tw`flex flex-col w-full mt-4 mr-0 lg:mr-2`}>
+
+                            <div css={tw`flex mb-6`}>
                                <ServerFeatureContainer/>
                            </div>
+
+                            <div css={tw`flex mb-6`}>
+                                <ServerAllocationsContainer/>
                            </div>
-                            <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`}>
-                                    <ServerResourceContainer/>
-                                </div>
-                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 px-6`}>
+
+                            <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
                                <div css={tw`flex flex-row`}>
                                    <ServerDeleteButton
                                        serverId={server?.id}
@ -257,10 +271,15 @@ export default function ServerSettingsContainer2 () {
                                </div>
                            </div>
                        </div>
+
+                        <div css={tw`flex flex-col`}>
+                            <div css={tw`flex mb-8`}>
+                                <ServerResourceContainer/>
+                            </div>
+                        </div>
                    </div>
                </Form>
-                )
-            }
+            )}
        </Formik>
    );
 }
--- a/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
@ -1,3 +1,4 @@
+import { Egg } from '@/api/admin/eggs/getEgg';
 import EggSelect from '@/components/admin/servers/EggSelect';
 import NestSelect from '@/components/admin/servers/NestSelect';
 import FormikSwitch from '@/components/elements/FormikSwitch';
@ -106,18 +107,20 @@ function ServerImageContainer () {
 export default function ServerStartupContainer () {
    const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);

+    const [ egg, setEgg ] = useState<Egg | null>(null);
+
    const server = Context.useStoreState(state => state.server);

+    const submit = () => {
+        clearFlashes('server');
+    };
+
    if (server === undefined) {
        return (
            <></>
        );
    }

-    const submit = () => {
-        clearFlashes('server');
-    };
-
    return (
        <Formik
            onSubmit={submit}
--- a/resources/scripts/components/elements/Editor.tsx
+++ b/resources/scripts/components/elements/Editor.tsx
@ -39,7 +39,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import tw, { styled, TwStyle } from 'twin.macro';
 import { ayuMirage } from '@/components/elements/EditorTheme';

-type EditorMode = LanguageSupport | LRLanguage | StreamParser<any>;
+type EditorMode = LanguageSupport | LRLanguage | StreamParser<unknown>;

 export interface Mode {
    name: string,
--- a/yarn.lock
+++ b/yarn.lock
@ -2503,10 +2503,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/node@npm:^16.7.10":
-  version: 16.7.10
-  resolution: "@types/node@npm:16.7.10"
-  checksum: 0518803caa1a14f4070e770a280eda1c4b4581a425cbda481cdd54b1f34a7ea497ff067fd23b90e3d4f4fdcfba15c1316182875e9cf9f5b2e880de1e595de053
+"@types/node@npm:^16.9.1":
+  version: 16.9.1
+  resolution: "@types/node@npm:16.9.1"
+  checksum: 41afcf183a22d59323a0199dd7e0f46591247f45fc08a4434edb26d56dc279ae4fdb80f37989ddd7a0f45e3857c4933e6e82057ede09c5a829f77e373e680375
  languageName: node
  linkType: hard

@ -3556,12 +3556,12 @@ __metadata:
  languageName: node
  linkType: hard

-"axios@npm:^0.21.3":
-  version: 0.21.3
-  resolution: "axios@npm:0.21.3"
+"axios@npm:^0.21.4":
+  version: 0.21.4
+  resolution: "axios@npm:0.21.4"
  dependencies:
    follow-redirects: ^1.14.0
-  checksum: fdcac33adb0330e127ab0e58f8d9fb7470b49dbfb0aba251ff54f146f2fc7d9362e3300581b6c98d2ea3b8db958ed099c831c3c7832ae79b14f517d5947a029a
+  checksum: 44245f24ac971e7458f3120c92f9d66d1fc695e8b97019139de5b0cc65d9b8104647db01e5f46917728edfc0cfd88eb30fc4c55e6053eef4ace76768ce95ff3c
  languageName: node
  linkType: hard

@ -7051,12 +7051,12 @@ fsevents@^1.2.7:
  languageName: node
  linkType: hard

-"i18next@npm:^20.6.0":
-  version: 20.6.0
-  resolution: "i18next@npm:20.6.0"
+"i18next@npm:^20.6.1":
+  version: 20.6.1
+  resolution: "i18next@npm:20.6.1"
  dependencies:
    "@babel/runtime": ^7.12.0
-  checksum: 71ba3b871e6161ddd54055440cbc1cb3da4c5ff22991e8f80b7c2ddd23c49a9fe72a254f3dc39245311043a93ef2978255f0aada39500f049bd7d59fda71b2a5
+  checksum: 313cd4b17f9092eaf8ca92a02bb74d099f4a8b26de6e38018f438ce6f706220e5f72d865e1f50d815e13504ec38bc77e0f6341f670ca5162689f8d11a859e564
  languageName: node
  linkType: hard

@ -9931,7 +9931,7 @@ fsevents@^1.2.7:
    "@types/debounce": ^1.2.0
    "@types/events": ^3.0.0
    "@types/history": ^4.7.9
-    "@types/node": ^16.7.10
+    "@types/node": ^16.9.1
    "@types/qrcode.react": ^1.0.2
    "@types/query-string": ^6.3.0
    "@types/react": ^16.14.15
@ -9950,7 +9950,7 @@ fsevents@^1.2.7:
    "@typescript-eslint/eslint-plugin": ^4.30.0
    "@typescript-eslint/parser": ^4.30.0
    autoprefixer: ^10.3.4
-    axios: ^0.21.3
+    axios: ^0.21.4
    babel-loader: ^8.2.2
    babel-plugin-macros: ^3.1.0
    babel-plugin-styled-components: ^1.13.2
@ -9974,7 +9974,7 @@ fsevents@^1.2.7:
    fork-ts-checker-webpack-plugin: ^6.3.3
    formik: ^2.2.9
    history: ^4.10.1
-    i18next: ^20.6.0
+    i18next: ^20.6.1
    i18next-chained-backend: ^3.0.2
    i18next-localstorage-backend: ^3.1.3
    i18next-xhr-backend: ^3.2.2
@ -10005,17 +10005,17 @@ fsevents@^1.2.7:
    tailwindcss: ^2.2.7
    terser-webpack-plugin: ^4.2.3
    twin.macro: ^2.7.0
-    typescript: ^4.3.5
+    typescript: ^4.4.3
    uuid: ^3.4.0
    webpack: ^4.46.0
    webpack-assets-manifest: ^4.0.6
    webpack-bundle-analyzer: ^4.4.2
    webpack-cli: ^3.3.12
    webpack-dev-server: ^3.11.2
-    xterm: ^4.13.0
+    xterm: ^4.14.1
    xterm-addon-attach: ^0.6.0
    xterm-addon-fit: ^0.5.0
-    xterm-addon-search: ^0.8.0
+    xterm-addon-search: ^0.8.1
    xterm-addon-search-bar: ^0.2.0
    xterm-addon-web-links: ^0.4.0
    yup: ^0.32.9
@ -12436,23 +12436,23 @@ resolve@^2.0.0-next.3:
  languageName: node
  linkType: hard

-typescript@^4.3.5:
-  version: 4.3.5
-  resolution: "typescript@npm:4.3.5"
+typescript@^4.4.3:
+  version: 4.4.3
+  resolution: "typescript@npm:4.4.3"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: bab033b5e2b0790dd35b77fd005df976ef80b8d84fd2c6e63cc31808151875beae9216e5a315fe7068e8499905c3c354248fe83272cdfc13b7705635f0c66c97
+  checksum: 05823f21796d450531a7e4ab299715d38fd9ded0e4ce7400876053f4b5166ca3dde7a68cecfe72d9086039f03c0b6edba36516fb10ed83c5837d9600532ea4c2
  languageName: node
  linkType: hard

-"typescript@patch:typescript@^4.3.5#~builtin<compat/typescript>":
-  version: 4.3.5
-  resolution: "typescript@patch:typescript@npm%3A4.3.5#~builtin<compat/typescript>::version=4.3.5&hash=32657b"
+"typescript@patch:typescript@^4.4.3#~builtin<compat/typescript>":
+  version: 4.4.3
+  resolution: "typescript@patch:typescript@npm%3A4.4.3#~builtin<compat/typescript>::version=4.4.3&hash=32657b"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: 4e2edec3c9b7b9a22ad9cbf9371339d9e13bfe44731f0e2d6a5287f991c3b0e3e0ac0c0ebbf9bf6fc2051e30559c789bfc9cf572cd6b836a0222ae141fac1dba
+  checksum: 28ab98313afab46788ff41014fdb5932430ada6e03cf9e92ac47f406526a2cac1ae2894834e7da61e46b7429318e9c47f45ba8de323332f0cb9af99b72ebae74
  languageName: node
  linkType: hard

@ -13151,12 +13151,12 @@ typescript@^4.3.5:
  languageName: node
  linkType: hard

-"xterm-addon-search@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "xterm-addon-search@npm:0.8.0"
+"xterm-addon-search@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "xterm-addon-search@npm:0.8.1"
  peerDependencies:
    xterm: ^4.0.0
-  checksum: dedca29de6a764530a2def6e3ace561487b9750d1bfccafbb7547284da2384776eb943ee65709ea23a3d0441a76909be911219d66922f72a92fac3c2e2d6ad57
+  checksum: 1ddea94543542e135449b56cbdb4546a996e232e127171c0c08c0d94090ca3bfcf70e6315f70e84c32090d44ebc84807cc33689688f69fc615a9a5a3fffa3b86
  languageName: node
  linkType: hard

@ -13169,10 +13169,10 @@ typescript@^4.3.5:
  languageName: node
  linkType: hard

-"xterm@npm:^4.13.0":
-  version: 4.13.0
-  resolution: "xterm@npm:4.13.0"
-  checksum: 4b9103d88c8e5afe193e1f425f5f59c2e47f8064c3b6760409b7a099ae997202e0fdcbc8c52067884d06279a88b47c62cc63ca1cc6ce38f13303bdb34192319e
+"xterm@npm:^4.14.1":
+  version: 4.14.1
+  resolution: "xterm@npm:4.14.1"
+  checksum: 49e26b1de3f6772ea980adb1f630b3e065eea921b91d9126acce1b09050575c7773358ece6cdf5bd2ae9f5daab85ab45ce8b1c5caada850cd5b293b9132a97a5
  languageName: node
  linkType: hard