admin(ui): show version information

resources/scripts/components/admin/overview/OverviewContainer.tsx

@@ -1,14 +1,89 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import tw from 'twin.macro';
+import useFlash from '@/plugins/useFlash';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Spinner from '@/components/elements/Spinner';
+import getVersion, { VersionData } from '@/api/admin/getVersion';
+
+const Code = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }}>
+            {children}
+        </code>
+    );
+};
 
 export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const [ loading, setLoading ] = useState<boolean>(true);
+    const [ versionData, setVersionData ] = useState<VersionData | undefined>(undefined);
+
+    useEffect(() => {
+        clearFlashes('overview');
+
+        getVersion()
+            .then(versionData => setVersionData(versionData))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError(error);
+            })
+            .then(() => setLoading(false));
+    }, []);
+
     return (
         <AdminContentBlock>
-            <div>
+            <div css={tw`flex flex-col mb-8`}>
                 <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
                 <p css={tw`text-base text-neutral-400`}>A quick glance at your system.</p>
             </div>
+
+            <FlashMessageRender byKey={'overview'} css={tw`mb-4`}/>
+
+            <div css={tw`flex flex-col w-full rounded-lg shadow-md bg-neutral-700`}>
+                { loading ?
+                    <div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '16rem' }}>
+                        <Spinner size={'base'}/>
+                    </div>
+                    :
+                    <div css={tw`rounded shadow-md bg-neutral-700`}>
+                        <div css={tw`bg-neutral-900 rounded-t border-b border-black p-3`}>
+                            <p css={tw`text-sm uppercase`}>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`inline-block mr-2`} style={{ height: '1rem' }}>
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+                                </svg>
+
+                                System Information
+                            </p>
+                        </div>
+
+                        <div css={tw`p-3`}>
+                            {versionData?.panel.current === 'canary' ?
+                                <p css={tw`text-neutral-200`}>
+                                    I hope you enjoy living on the edge because you are
+                                    running a <Code>{versionData?.panel.current}</Code> version
+                                    of Pterodactyl.
+                                </p>
+                                : versionData?.panel.latest === versionData?.panel.current
+                                    ?
+                                    <p css={tw`text-neutral-200`}>
+                                        Your panel is <span css={tw`text-neutral-100`}>up-to-date</span>.
+                                        The latest version
+                                        is <Code>{versionData?.panel.latest}</Code> and you are
+                                        running version <Code>{versionData?.panel.current}</Code>.
+                                    </p>
+                                    :
+                                    <p css={tw`text-neutral-200`}>
+                                        Your panel is <span css={tw`text-neutral-100`}>not up-to-date</span>.
+                                        The latest version
+                                        is <Code>{versionData?.panel.latest}</Code> and you are
+                                        running version <Code>{versionData?.panel.current}</Code>.
+                                    </p>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
         </AdminContentBlock>
     );
 };

resources/scripts/components/admin/roles/RolesContainer.tsx

@@ -1,8 +1,6 @@
-import CopyOnClick from '@/components/elements/CopyOnClick';
 import React, { useEffect, useState } from 'react';
 import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import { AdminContext } from '@/state/admin';
-import { httpErrorToHuman } from '@/api/http';
 import NewRoleButton from '@/components/admin/roles/NewRoleButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
@@ -12,6 +10,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import getRoles from '@/api/admin/roles/getRoles';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
 import AdminTable, { ContentWrapper, Loading, NoItems, TableBody, TableHead, TableHeader, TableRow } from '@/components/admin/AdminTable';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.roles.selectedRoles.indexOf(id) >= 0);
@@ -36,7 +35,7 @@ const RowCheckbox = ({ id }: { id: number}) => {
 export default () => {
     const match = useRouteMatch();
 
-    const { addError, clearFlashes } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ loading, setLoading ] = useState(true);
 
     const roles = useDeepMemoize(AdminContext.useStoreState(state => state.roles.data));
@@ -53,7 +52,7 @@ export default () => {
             .then(roles => setRoles(roles))
             .catch(error => {
                 console.error(error);
-                addError({ message: httpErrorToHuman(error), key: 'roles' });
+                clearAndAddHttpError(error);
             })
             .then(() => setLoading(false));
     }, []);