Get server console page rendering (mostly) correctly

resources/scripts/components/App.tsx

@@ -12,7 +12,6 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
-import TransitionRouter from '@/TransitionRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;

resources/scripts/components/NavigationBar.tsx

@@ -7,6 +7,7 @@ import { ApplicationStore } from '@/state';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
 import tw from 'twin.macro';
 import styled from 'styled-components/macro';
+// @ts-ignore
 import * as config from '@/../../tailwind.config.js';
 
 const Navigation = styled.div`

resources/scripts/components/NetworkErrorMessage.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import MessageBox from '@/components/MessageBox';
-
-export default ({ message }: { message: string | undefined | null }) => (
-    !message ?
-        null
-        :
-        <div className={'mb-4'}>
-            <MessageBox type={'error'} title={'Error'}>
-                {message}
-            </MessageBox>
-        </div>
-);

resources/scripts/components/ServerOverviewContainer.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-
-export default class ServerOverviewContainer extends React.PureComponent {
-    render () {
-        return (
-            <div className={'mt-10'}>
-                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account'}>Account</NavLink>
-                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account/design'}>Design</NavLink>
-            </div>
-        );
-    }
-}

resources/scripts/components/dashboard/ServerRow.tsx

@@ -39,6 +39,7 @@ export default ({ server }: { server: Server }) => {
 
     useEffect(() => {
         getStats().then(() => {
+            // @ts-ignore
             interval.current = setInterval(() => getStats(), 20000);
         });
 
@@ -79,7 +80,7 @@ export default ({ server }: { server: Server }) => {
             <div css={tw`w-1/3 flex items-baseline relative`}>
                 {!stats ?
                     !statsError ?
-                        <SpinnerOverlay size={'small'} visible={true} backgroundOpacity={0.25}/>
+                        <SpinnerOverlay size={'small'} visible backgroundOpacity={0.25}/>
                         :
                         server.isInstalling ?
                             <div css={tw`flex-1 text-center`}>

resources/scripts/components/elements/PageContentBlock.tsx

@@ -3,10 +3,10 @@ import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
-const PageContentBlock: React.FC = ({ children }) => (
+const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
     <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
-            <ContentContainer css={tw`my-10`}>
+            <ContentContainer css={tw`my-10`} className={className}>
                 {children}
             </ContentContainer>
             <ContentContainer css={tw`mb-4`}>

resources/scripts/components/elements/SubNavigation.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+// @ts-ignore
+import config from '../../../../tailwind.config';
+
+const SubNavigation = styled.div`
+    ${tw`w-full bg-neutral-700 shadow`};
+    
+    & > div {
+        ${tw`flex items-center text-sm mx-auto px-2`};
+        max-width: 1200px;
+        
+        & > a, & > div {
+            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
+            
+            &:not(:first-of-type) {
+                ${tw`ml-2`};
+            }
+            
+            &:active, &:hover {
+                ${tw`text-neutral-100`};
+            }
+            
+            &:active, &:hover, &.active {
+                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
+            }
+        }
+    }
+`;
+
+export default SubNavigation;

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -1,10 +1,11 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
 
 const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
     <Suspense
         fallback={
-            <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
+            <div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
                 <Spinner centered/>
             </div>
         }

resources/scripts/components/elements/TitledGreyBox.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import tw from 'twin.macro';
 
 interface Props {
     icon?: IconProp;
@@ -10,17 +11,17 @@ interface Props {
 }
 
 const TitledGreyBox = ({ icon, title, children, className }: Props) => (
-    <div className={`rounded shadow-md bg-neutral-700 ${className}`}>
-        <div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
+    <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
+        <div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
             {typeof title === 'string' ?
-                <p className={'text-sm uppercase'}>
-                    {icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
                 </p>
                 :
                 title
             }
         </div>
-        <div className={'p-3'}>
+        <div css={tw`p-3`}>
             {children}
         </div>
     </div>

resources/scripts/components/screens/ScreenBlock.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import styled from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
 interface BaseProps {
@@ -27,17 +26,15 @@ interface PropsWithBack extends BaseProps {
 
 type Props = PropsWithBack | PropsWithRetry;
 
+const spin = keyframes`
+    to { transform: rotate(360deg) }
+`;
+
 const ActionButton = styled.button`
     ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
 
     &.hover\\:spin:hover {
-        animation: spin 2s linear infinite;
-    }
-
-    @keyframes spin {
-        to {
-            transform: rotate(360deg);
-        }
+        animation: ${spin} 2s linear infinite;
     }
 `;
 

resources/scripts/components/server/Console.tsx

@@ -4,9 +4,7 @@ import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
 import styled from 'styled-components/macro';
-import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
-import classNames from 'classnames';
 import tw from 'twin.macro';
 
 const theme = {
@@ -123,12 +121,13 @@ export default () => {
     }, [ connected, instance ]);
 
     return (
-        <div className={'text-xs font-mono relative'}>
+        <div css={tw`text-xs font-mono relative`}>
             <SpinnerOverlay visible={!connected} size={'large'}/>
             <div
-                className={classNames('rounded-t p-2 bg-black w-full', {
-                    'rounded-b': !canSendCommands,
-                })}
+                css={[
+                    tw`rounded-t p-2 bg-black w-full`,
+                    !canSendCommands && tw`rounded-b`,
+                ]}
                 style={{
                     minHeight: '16rem',
                     maxHeight: '32rem',
@@ -137,13 +136,13 @@ export default () => {
                 <TerminalDiv id={'terminal'} ref={useRef}/>
             </div>
             {canSendCommands &&
-            <div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
-                <div className={'flex-no-shrink p-2 font-bold'}>$</div>
-                <div className={'w-full'}>
+            <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
+                <div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
+                <div css={tw`w-full`}>
                     <input
                         type={'text'}
                         disabled={!instance || !connected}
-                        className={'bg-transparent text-neutral-100 p-2 pl-0 w-full'}
+                        css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
                         onKeyDown={e => handleCommandKeydown(e)}
                     />
                 </div>

resources/scripts/components/server/ServerConsole.tsx

@@ -13,35 +13,15 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import ContentContainer from '@/components/elements/ContentContainer';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import StopOrKillButton from '@/components/server/StopOrKillButton';
 
-type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
+export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
 const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
 const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
 
-const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
-    const [ clicked, setClicked ] = useState(false);
-    const status = ServerContext.useStoreState(state => state.status.value);
-
-    useEffect(() => {
-        setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
-    }, [ status ]);
-
-    return (
-        <button
-            className={'btn btn-red btn-xs'}
-            disabled={status === 'offline'}
-            onClick={e => {
-                e.preventDefault();
-                onPress(clicked ? 'kill' : 'stop');
-                setClicked(true);
-            }}
-        >
-            {clicked ? 'Kill' : 'Stop'}
-        </button>
-    );
-};
-
 export default () => {
     const [ memory, setMemory ] = useState(0);
     const [ cpu, setCpu ] = useState(0);
@@ -81,17 +61,17 @@ export default () => {
         };
     }, [ instance, connected ]);
 
-    const disklimit = server.limits.disk != 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : "Unlimited";
-    const memorylimit = server.limits.memory != 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : "Unlimited";
+    const disklimit = server.limits.disk ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited';
+    const memorylimit = server.limits.memory ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited';
 
     return (
-        <PageContentBlock className={'flex'}>
-            <div className={'w-1/4'}>
+        <PageContentBlock css={tw`flex`}>
+            <div css={tw`w-1/4`}>
                 <TitledGreyBox title={server.name} icon={faServer}>
-                    <p className={'text-xs uppercase'}>
+                    <p css={tw`text-xs uppercase`}>
                         <FontAwesomeIcon
                             icon={faCircle}
-                            fixedWidth={true}
+                            fixedWidth
                             className={classNames('mr-1', {
                                 'text-red-500': status === 'offline',
                                 'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
@@ -100,39 +80,27 @@ export default () => {
                         />
                         &nbsp;{status}
                     </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faMicrochip}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{cpu.toFixed(2)} %
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {cpu.toFixed(2)}%
                     </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faMemory}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{bytesToHuman(memory)}
-                        <span className={'text-neutral-500'}> / {memorylimit}</span>
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(memory)}
+                        <span css={tw`text-neutral-500`}> / {memorylimit}</span>
                     </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faHdd}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{bytesToHuman(disk)}
-                        <span className={'text-neutral-500'}> / {disklimit}</span>
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(disk)}
+                        <span css={tw`text-neutral-500`}> / {disklimit}</span>
                     </p>
                 </TitledGreyBox>
                 {!server.isInstalling ?
-                    <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny={true}>
-                        <div className={'grey-box justify-center'}>
+                    <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
+                        <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
                             <Can action={'control.start'}>
-                                <button
-                                    className={'btn btn-secondary btn-green btn-xs mr-2'}
+                                <Button
+                                    size={'xsmall'}
+                                    color={'green'}
+                                    isSecondary
+                                    css={tw`mr-2`}
                                     disabled={status !== 'offline'}
                                     onClick={e => {
                                         e.preventDefault();
@@ -140,18 +108,20 @@ export default () => {
                                     }}
                                 >
                                     Start
-                                </button>
+                                </Button>
                             </Can>
                             <Can action={'control.restart'}>
-                                <button
-                                    className={'btn btn-secondary btn-primary btn-xs mr-2'}
+                                <Button
+                                    size={'xsmall'}
+                                    isSecondary
+                                    css={tw`mr-2`}
                                     onClick={e => {
                                         e.preventDefault();
                                         sendPowerCommand('restart');
                                     }}
                                 >
                                     Restart
-                                </button>
+                                </Button>
                             </Can>
                             <Can action={'control.stop'}>
                                 <StopOrKillButton onPress={action => sendPowerCommand(action)}/>
@@ -159,9 +129,9 @@ export default () => {
                         </div>
                     </Can>
                     :
-                    <div className={'mt-4 rounded bg-yellow-500 p-3'}>
+                    <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
                         <ContentContainer>
-                            <p className={'text-sm text-yellow-900'}>
+                            <p css={tw`text-sm text-yellow-900`}>
                                 This server is currently running its installation process and most actions are
                                 unavailable.
                             </p>
@@ -169,7 +139,7 @@ export default () => {
                     </div>
                 }
             </div>
-            <div className={'flex-1 ml-4'}>
+            <div css={tw`flex-1 ml-4`}>
                 <SuspenseSpinner>
                     <ChunkedConsole/>
                     <ChunkedStatGraphs/>

resources/scripts/components/server/StatGraphs.tsx

@@ -6,6 +6,7 @@ import merge from 'lodash-es/merge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
 import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
+import tw from 'twin.macro';
 
 const chartDefaults: ChartConfiguration = {
     type: 'line',
@@ -157,21 +158,21 @@ export default () => {
     }, [ instance, connected, memory, cpu ]);
 
     return (
-        <div className={'flex mt-4'}>
-            <TitledGreyBox title={'Memory usage'} icon={faMemory} className={'flex-1 mr-2'}>
+        <div css={tw`flex mt-4`}>
+            <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`flex-1 mr-2`}>
                 {status !== 'offline' ?
                     <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
                     :
-                    <p className={'text-xs text-neutral-400 text-center p-3'}>
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
                         Server is offline.
                     </p>
                 }
             </TitledGreyBox>
-            <TitledGreyBox title={'CPU usage'} icon={faMicrochip} className={'flex-1 ml-2'}>
+            <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`flex-1 ml-2`}>
                 {status !== 'offline' ?
                     <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
                     :
-                    <p className={'text-xs text-neutral-400 text-center p-3'}>
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
                         Server is offline.
                     </p>
                 }

resources/scripts/components/server/StopOrKillButton.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { ServerContext } from '@/state/server';
+import tw from 'twin.macro';
+import { PowerAction } from '@/components/server/ServerConsole';
+import Button from '@/components/elements/Button';
+
+const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
+    const [ clicked, setClicked ] = useState(false);
+    const status = ServerContext.useStoreState(state => state.status.value);
+
+    useEffect(() => {
+        setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
+    }, [ status ]);
+
+    return (
+        <Button
+            color={'red'}
+            size={'xsmall'}
+            disabled={status === 'offline'}
+            onClick={e => {
+                e.preventDefault();
+                onPress(clicked ? 'kill' : 'stop');
+                setClicked(true);
+            }}
+        >
+            {clicked ? 'Kill' : 'Stop'}
+        </Button>
+    );
+};
+
+export default StopOrKillButton;

resources/scripts/components/server/WebsocketHandler.tsx

@@ -71,7 +71,7 @@ export default () => {
                     <ContentContainer className={'flex items-center justify-center'}>
                         <Spinner size={'small'}/>
                         <p className={'ml-2 text-sm text-red-100'}>
-                            We're having some trouble connecting to your server, please wait...
+                            We&apos;re having some trouble connecting to your server, please wait...
                         </p>
                     </ContentContainer>
                 </div>

resources/scripts/routers/DashboardRouter.tsx

@@ -5,35 +5,8 @@ import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
-import config from '@/../../tailwind.config.js';
 import TransitionRouter from '@/TransitionRouter';
-
-const SubNavigation = styled.div`
-    ${tw`w-full bg-neutral-700 shadow`};
-    
-    & > div {
-        ${tw`flex items-center text-sm mx-auto px-2`};
-        max-width: 1200px;
-        
-        & > a, & > div {
-            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
-            
-            &:not(:first-of-type) {
-                ${tw`ml-2`};
-            }
-            
-            &:active, &:hover {
-                ${tw`text-neutral-100`};
-            }
-            
-            &:active, &:hover, &.active {
-                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
-            }
-        }
-    }
-`;
+import SubNavigation from '@/components/elements/SubNavigation';
 
 export default ({ location }: RouteComponentProps) => (
     <>

resources/scripts/routers/ServerRouter.tsx

@@ -23,6 +23,7 @@ import NotFound from '@/components/screens/NotFound';
 import { useStoreState } from 'easy-peasy';
 import useServer from '@/plugins/useServer';
 import ScreenBlock from '@/components/screens/ScreenBlock';
+import SubNavigation from '@/components/elements/SubNavigation';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const { rootAdmin } = useStoreState(state => state.user.data!);
@@ -71,8 +72,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                 :
                 <>
                     <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
-                        <div id={'sub-navigation'}>
-                            <div className={'items'}>
+                        <SubNavigation>
+                            <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>
                                 <Can action={'file.*'}>
                                     <NavLink to={`${match.url}/files`}>File Manager</NavLink>
@@ -93,7 +94,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                     <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                                 </Can>
                             </div>
-                        </div>
+                        </SubNavigation>
                     </CSSTransition>
                     {(installing && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${server.id}`)))) ?
                         <ScreenBlock

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2015",
-    "module": "es2015",
+    "module": "es2020",
     "jsx": "react",
     "strict": true,
     "noEmit": true,