Java Docker image updater feature (#3430)

Co-Authored-By: Lance Pioch <me@lance.sh>

resources/scripts/components/server/ServerConsole.tsx

@@ -7,7 +7,7 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
 import isEqual from 'react-fast-compare';
 import PowerControls from '@/components/server/PowerControls';
-import { EulaModalFeature } from '@feature/index';
+import { EulaModalFeature, JavaVersionModalFeature } from '@feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';
 
@@ -60,6 +60,7 @@ const ServerConsole = () => {
                 {eggFeatures.includes('eula') &&
                 <React.Suspense fallback={null}>
                     <EulaModalFeature/>
+                    <JavaVersionModalFeature/>
                 </React.Suspense>
                 }
             </div>

resources/scripts/components/server/features/JavaVersionModalFeature.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { ServerContext } from '@/state/server';
+import Modal from '@/components/elements/Modal';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import setSelectedDockerImage from '@/api/server/setSelectedDockerImage';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import useFlash from '@/plugins/useFlash';
+import { SocketEvent, SocketRequest } from '@/components/server/events';
+import Select from '@/components/elements/Select';
+
+const dockerImageList = [
+    { name: 'Java 8', image: 'ghcr.io/pterodactyl/yolks:java_8' },
+    { name: 'Java 11', image: 'ghcr.io/pterodactyl/yolks:java_11' },
+    { name: 'Java 16', image: 'ghcr.io/pterodactyl/yolks:java_16' },
+];
+
+const JavaVersionModalFeature = () => {
+    const [ visible, setVisible ] = useState(false);
+    const [ loading, setLoading ] = useState(false);
+    const [ selectedVersion, setSelectedVersion ] = useState('ghcr.io/pterodactyl/yolks:java_16');
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+
+    useEffect(() => {
+        if (!connected || !instance || status === 'running') return;
+
+        const errors = [
+            'minecraft 1.17 requires running the server with java 16 or above',
+            'java.lang.unsupportedclassversionerror',
+            'unsupported major.minor version',
+            'has been compiled by a more recent version of the java runtime',
+        ];
+
+        const listener = (line: string) => {
+            if (errors.some(p => line.toLowerCase().includes(p))) {
+                setVisible(true);
+            }
+        };
+
+        instance.addListener(SocketEvent.CONSOLE_OUTPUT, listener);
+
+        return () => {
+            instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
+        };
+    }, [ connected, instance, status ]);
+
+    const updateJava = () => {
+        setLoading(true);
+        clearFlashes('feature:javaVersion');
+
+        setSelectedDockerImage(uuid, selectedVersion)
+            .then(() => {
+                if (status === 'offline' && instance) {
+                    instance.send(SocketRequest.SET_STATE, 'restart');
+                }
+
+                setLoading(false);
+                setVisible(false);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'feature:javaVersion', error });
+            })
+            .then(() => setLoading(false));
+    };
+
+    useEffect(() => {
+        clearFlashes('feature:javaVersion');
+    }, []);
+
+    return (
+        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+            <FlashMessageRender key={'feature:javaVersion'} css={tw`mb-4`}/>
+            <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid Java Version, Update Docker Image?</h2>
+            <p css={tw`mt-4`}>This server is unable to start due to the required java version not being met.</p>
+            <p css={tw`mt-4`}>By pressing {'"Update Docker Image"'} below you are acknowledging that the docker image this server uses will be changed to a image below that has the Java version you are requesting.</p>
+            <div css={tw`sm:flex items-center mt-4`}>
+                <p>Please select a Java version from the list below.</p>
+                <Select
+                    onChange={e => setSelectedVersion(e.target.value)}
+                >
+                    {dockerImageList.map((key, index) => {
+                        return (
+                            <option key={index} value={key.image}>{key.name}</option>
+                        );
+                    })}
+                </Select>
+            </div>
+            <div css={tw`mt-8 sm:flex items-center justify-end`}>
+                <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
+                        Cancel
+                </Button>
+                <Button onClick={updateJava} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
+                        Update Docker Image
+                </Button>
+            </div>
+        </Modal>
+    );
+};
+
+export default JavaVersionModalFeature;

resources/scripts/components/server/features/eula/EulaModalFeature.tsx

@@ -53,37 +53,34 @@ const EulaModalFeature = () => {
             .then(() => setLoading(false));
     };
 
-    useEffect(() => () => {
+    useEffect(() => {
         clearFlashes('feature:eula');
     }, []);
 
     return (
-        !visible ?
+        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
-            null
+            <FlashMessageRender key={'feature:eula'} css={tw`mb-4`}/>
-            :
+            <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Accept Minecraft&reg; EULA</h2>
-            <Modal visible onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+            <p css={tw`text-neutral-200`}>
-                <FlashMessageRender key={'feature:eula'} css={tw`mb-4`}/>
-                <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Accept Minecraft&reg; EULA</h2>
-                <p css={tw`text-neutral-200`}>
                     By pressing {'"I Accept"'} below you are indicating your agreement to the&nbsp;
-                    <a
+                <a
-                        target={'_blank'}
+                    target={'_blank'}
-                        css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
+                    css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
-                        rel={'noreferrer noopener'}
+                    rel={'noreferrer noopener'}
-                        href="https://account.mojang.com/documents/minecraft_eula"
+                    href="https://account.mojang.com/documents/minecraft_eula"
-                    >
+                >
                         Minecraft&reg; EULA
-                    </a>.
+                </a>.
-                </p>
+            </p>
-                <div css={tw`mt-8 sm:flex items-center justify-end`}>
+            <div css={tw`mt-8 sm:flex items-center justify-end`}>
-                    <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
+                <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                         Cancel
-                    </Button>
+                </Button>
-                    <Button onClick={onAcceptEULA} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
+                <Button onClick={onAcceptEULA} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
                         I Accept
-                    </Button>
+                </Button>
-                </div>
+            </div>
-            </Modal>
+        </Modal>
     );
 };
 

resources/scripts/components/server/features/index.ts

@@ -7,5 +7,6 @@ import { lazy } from 'react';
  * on the feature and the egg).
  */
 const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
+const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.javaVersion" */'@feature/JavaVersionModalFeature'));
 
-export { EulaModalFeature };
+export { EulaModalFeature, JavaVersionModalFeature };