First pass at new server console design

resources/scripts/components/elements/button/style.module.css

@@ -16,7 +16,7 @@
         @apply text-gray-50 bg-transparent;
 
         &:disabled {
-            @apply bg-transparent;
+            background: transparent !important;
         }
     }
 

resources/scripts/components/elements/dialog/ConfirmationDialog.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/elements/button/index';
 type ConfirmationProps = Omit<DialogProps, 'description' | 'children'> & {
     children: React.ReactNode;
     confirm?: string | undefined;
-    onConfirmed: () => void;
+    onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 export default ({ confirm = 'Okay', children, onConfirmed, ...props }: ConfirmationProps) => {

resources/scripts/components/elements/tooltip/Tooltip.tsx

@@ -90,7 +90,7 @@ export default ({
                         transition={{ type: 'spring', damping: 20, stiffness: 300, duration: 0.075 }}
                         {...getFloatingProps({
                             ref: floating,
-                            className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[90vw]',
+                            className: 'absolute top-0 left-0 bg-gray-900 text-sm text-gray-200 px-3 py-2 rounded pointer-events-none max-w-[20rem] z-[9999]',
                             style: {
                                 position: strategy,
                                 top: `${y || 0}px`,

resources/scripts/components/server/PowerControls.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import tw from 'twin.macro';
-import Can from '@/components/elements/Can';
-import Button from '@/components/elements/Button';
-import StopOrKillButton from '@/components/server/StopOrKillButton';
-import { PowerAction } from '@/components/server/ServerConsole';
-import { ServerContext } from '@/state/server';
-
-const PowerControls = () => {
-    const status = ServerContext.useStoreState(state => state.status.value);
-    const instance = ServerContext.useStoreState(state => state.socket.instance);
-
-    const sendPowerCommand = (command: PowerAction) => {
-        instance && instance.send('set state', command);
-    };
-
-    return (
-        <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
-            <Can action={'control.start'}>
-                <Button
-                    size={'xsmall'}
-                    color={'green'}
-                    isSecondary
-                    css={tw`mr-2`}
-                    disabled={status !== 'offline'}
-                    onClick={e => {
-                        e.preventDefault();
-                        sendPowerCommand('start');
-                    }}
-                >
-                    Start
-                </Button>
-            </Can>
-            <Can action={'control.restart'}>
-                <Button
-                    size={'xsmall'}
-                    isSecondary
-                    css={tw`mr-2`}
-                    disabled={!status}
-                    onClick={e => {
-                        e.preventDefault();
-                        sendPowerCommand('restart');
-                    }}
-                >
-                    Restart
-                </Button>
-            </Can>
-            <Can action={'control.stop'}>
-                <StopOrKillButton onPress={action => sendPowerCommand(action)}/>
-            </Can>
-        </div>
-    );
-};
-
-export default PowerControls;

resources/scripts/components/server/ServerConsole.tsx

@@ -4,26 +4,39 @@ import Can from '@/components/elements/Can';
 import ContentContainer from '@/components/elements/ContentContainer';
 import tw from 'twin.macro';
 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 ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';
 import Features from '@feature/Features';
 import Console from '@/components/server/Console';
 import StatGraphs from '@/components/server/StatGraphs';
+import PowerButtons from '@/components/server/console/PowerButtons';
+import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
 const ServerConsole = () => {
+    const name = ServerContext.useStoreState(state => state.server.data!.name);
+    const description = ServerContext.useStoreState(state => state.server.data!.description);
     const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
     const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
     const eggFeatures = ServerContext.useStoreState(state => state.server.data!.eggFeatures, isEqual);
 
     return (
-        <ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
+        <ServerContentBlock title={'Console'} className={'grid grid-cols-4 gap-4'}>
-            <div css={tw`w-full lg:w-1/4`}>
+            <div className={'flex space-x-4 items-end col-span-4'}>
-                <ServerDetailsBlock/>
+                <div className={'flex-1'}>
+                    <h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
+                    <p className={'text-sm line-clamp-2'}>{description}</p>
+                </div>
+                <div className={'flex-1'}>
+                    <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
+                        <PowerButtons className={'flex justify-end space-x-2'}/>
+                    </Can>
+                </div>
+            </div>
+            <div className={'col-span-4 lg:col-span-1'}>
+                <ServerDetailsBlock className={'flex flex-col space-y-4'}/>
                 {isInstalling ?
                     <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
                         <ContentContainer>
@@ -44,19 +57,17 @@ const ServerConsole = () => {
                             </ContentContainer>
                         </div>
                         :
-                        <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
+                        null
-                            <PowerControls/>
-                        </Can>
                 }
             </div>
-            <div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
+            <div className={'col-span-3'}>
                 <Spinner.Suspense>
                     <ErrorBoundary>
                         <Console/>
                     </ErrorBoundary>
                     <StatGraphs/>
                 </Spinner.Suspense>
-                <Features enabled={eggFeatures} />
+                <Features enabled={eggFeatures}/>
             </div>
         </ServerContentBlock>
     );

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -1,48 +1,61 @@
 import React, { useEffect, useState } from 'react';
-import tw, { TwStyle } from 'twin.macro';
 import {
-    faArrowCircleDown,
+    faClock,
-    faArrowCircleUp,
+    faCloudDownloadAlt,
-    faCircle,
+    faCloudUploadAlt,
-    faEthernet,
     faHdd,
     faMemory,
     faMicrochip,
-    faServer,
+    faWifi,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { bytesToHuman, formatIp, megabytesToHuman } from '@/helpers';
-import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { ServerContext } from '@/state/server';
-import CopyOnClick from '@/components/elements/CopyOnClick';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import UptimeDuration from '@/components/server/UptimeDuration';
+import StatBlock from '@/components/server/console/StatBlock';
+import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 
 type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;
 
-function statusToColor (status: string | null, installing: boolean): TwStyle {
+interface DetailBlockProps {
-    if (installing) {
+    className?: string;
-        status = '';
-    }
-
-    switch (status) {
-        case 'offline':
-            return tw`text-red-500`;
-        case 'running':
-            return tw`text-green-500`;
-        default:
-            return tw`text-yellow-500`;
-    }
 }
 
-const ServerDetailsBlock = () => {
+const getBackgroundColor = (value: number, max: number | null): string | undefined => {
+    const delta = !max ? 0 : (value / max);
+
+    if (delta > 0.8) {
+        if (delta > 0.9) {
+            return 'bg-red-500';
+        }
+        return 'bg-yellow-500';
+    }
+
+    return undefined;
+};
+
+const ServerDetailsBlock = ({ className }: DetailBlockProps) => {
     const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
 
     const status = ServerContext.useStoreState(state => state.status.value);
     const connected = ServerContext.useStoreState(state => state.socket.connected);
     const instance = ServerContext.useStoreState(state => state.socket.instance);
+    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
+    const allocation = ServerContext.useStoreState(state => {
+        const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
 
-    const statsListener = (data: string) => {
+        return !match ? 'n/a' : `${match.alias || formatIp(match.ip)}:${match.port}`;
+    });
+
+    useEffect(() => {
+        if (!connected || !instance) {
+            return;
+        }
+
+        instance.send(SocketRequest.SEND_STATS);
+    }, [ instance, connected ]);
+
+    useWebsocketEvent(SocketEvent.STATS, (data) => {
         let stats: any = {};
         try {
             stats = JSON.parse(data);
@@ -58,75 +71,92 @@ const ServerDetailsBlock = () => {
             rx: stats.network.rx_bytes,
             uptime: stats.uptime || 0,
         });
-    };
+    });
-
-    useEffect(() => {
-        if (!connected || !instance) {
-            return;
-        }
-
-        instance.addListener(SocketEvent.STATS, statsListener);
-        instance.send(SocketRequest.SEND_STATS);
-
-        return () => {
-            instance.removeListener(SocketEvent.STATS, statsListener);
-        };
-    }, [ instance, connected ]);
-
-    const name = ServerContext.useStoreState(state => state.server.data!.name);
-    const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
-    const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
-    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
-    const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map(
-        allocation => (allocation.alias || formatIp(allocation.ip)) + ':' + allocation.port,
-    )).toString();
-
-    const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
-    const memoryLimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
-    const cpuLimit = limits.cpu ? limits.cpu + '%' : 'Unlimited';
 
     return (
-        <TitledGreyBox css={tw`break-words`} title={name} icon={faServer}>
+        <div className={className}>
-            <p css={tw`text-xs uppercase`}>
+            <StatBlock
-                <FontAwesomeIcon
+                icon={faClock}
-                    icon={faCircle}
+                title={'Uptime'}
-                    fixedWidth
+                color={getBackgroundColor(status === 'running' ? 0 : (status !== 'offline' ? 9 : 10), 10)}
-                    css={[
+            >
-                        tw`mr-1`,
+                {stats.uptime > 0 ?
-                        statusToColor(status, isInstalling || isTransferring),
+                    <UptimeDuration uptime={stats.uptime / 1000}/>
-                    ]}
+                    :
-                />
+                    'Offline'
-                &nbsp;{!status ? 'Connecting...' : (isInstalling ? 'Installing' : (isTransferring) ? 'Transferring' : status)}
-                {stats.uptime > 0 &&
-                <span css={tw`ml-2 lowercase`}>
-                    (<UptimeDuration uptime={stats.uptime / 1000}/>)
-                </span>
                 }
-            </p>
+            </StatBlock>
-            <CopyOnClick text={primaryAllocation}>
+            <StatBlock
-                <p css={tw`text-xs mt-2`}>
+                icon={faMicrochip}
-                    <FontAwesomeIcon icon={faEthernet} fixedWidth css={tw`mr-1`}/>
+                title={'CPU'}
-                    <code css={tw`ml-1`}>{primaryAllocation}</code>
+                color={getBackgroundColor(stats.cpu, limits.cpu)}
-                </p>
+                description={limits.memory
-            </CopyOnClick>
+                    ? `This server is allowed to use up to ${limits.cpu}% of the host's available CPU resources.`
-            <p css={tw`text-xs mt-2`}>
+                    : 'No CPU limit has been configured for this server.'
-                <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
+                }
-                <span css={tw`text-neutral-500`}> / {cpuLimit}</span>
+            >
-            </p>
+                {status === 'offline' ?
-            <p css={tw`text-xs mt-2`}>
+                    <span className={'text-gray-400'}>Offline</span>
-                <FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(stats.memory)}
+                    :
-                <span css={tw`text-neutral-500`}> / {memoryLimit}</span>
+                    `${stats.cpu.toFixed(2)}%`
-            </p>
+                }
-            <p css={tw`text-xs mt-2`}>
+            </StatBlock>
-                <FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(stats.disk)}
+            <StatBlock
-                <span css={tw`text-neutral-500`}> / {diskLimit}</span>
+                icon={faMemory}
-            </p>
+                title={'Memory'}
-            <p css={tw`text-xs mt-2`}>
+                color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
-                <FontAwesomeIcon icon={faEthernet} fixedWidth css={tw`mr-1`}/>
+                description={limits.memory
-                <FontAwesomeIcon icon={faArrowCircleUp} fixedWidth css={tw`mr-1`}/>{bytesToHuman(stats.tx)}
+                    ? `This server is allowed to use up to ${megabytesToHuman(limits.memory)} of memory.`
-                <FontAwesomeIcon icon={faArrowCircleDown} fixedWidth css={tw`mx-1`}/>{bytesToHuman(stats.rx)}
+                    : 'No memory limit has been configured for this server.'
-            </p>
+                }
-        </TitledGreyBox>
+            >
+                {status === 'offline' ?
+                    <span className={'text-gray-400'}>Offline</span>
+                    :
+                    bytesToHuman(stats.memory)
+                }
+            </StatBlock>
+            <StatBlock
+                icon={faHdd}
+                title={'Disk'}
+                color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
+                description={limits.disk
+                    ? `This server is allowed to use up to ${megabytesToHuman(limits.disk)} of disk space.`
+                    : 'No disk space limit has been configured for this server.'
+                }
+            >
+                {bytesToHuman(stats.disk)}
+            </StatBlock>
+            <StatBlock
+                icon={faCloudDownloadAlt}
+                title={'Network (Inbound)'}
+                description={'The total amount of network traffic that your server has recieved since it was started.'}
+            >
+                {status === 'offline' ?
+                    <span className={'text-gray-400'}>Offline</span>
+                    :
+                    bytesToHuman(stats.tx)
+                }
+            </StatBlock>
+            <StatBlock
+                icon={faCloudUploadAlt}
+                title={'Network (Outbound)'}
+                description={'The total amount of traffic your server has sent across the internet since it was started.'}
+            >
+                {status === 'offline' ?
+                    <span className={'text-gray-400'}>Offline</span>
+                    :
+                    bytesToHuman(stats.rx)
+                }
+            </StatBlock>
+            <StatBlock
+                icon={faWifi}
+                title={'Address'}
+                description={`You can connect to your server at: ${allocation}`}
+            >
+                {allocation}
+            </StatBlock>
+        </div>
     );
 };
 

resources/scripts/components/server/StopOrKillButton.tsx

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

resources/scripts/components/server/console/PowerButtons.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/elements/button/index';
+import Can from '@/components/elements/Can';
+import { ServerContext } from '@/state/server';
+import { PowerAction } from '@/components/server/ServerConsole';
+import { Dialog } from '@/components/elements/dialog';
+
+interface PowerButtonProps {
+    className?: string;
+}
+
+export default ({ className }: PowerButtonProps) => {
+    const [ open, setOpen ] = useState(false);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
+
+    const killable = status === 'stopping';
+    const onButtonClick = (action: PowerAction | 'kill-confirmed', e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        e.preventDefault();
+        if (action === 'kill') {
+            return setOpen(true);
+        }
+
+        if (instance) {
+            setOpen(false);
+            instance.send('set state', action === 'kill-confirmed' ? 'kill' : action);
+        }
+    };
+
+    return (
+        <div className={className}>
+            <Dialog.Confirm
+                open={open}
+                hideCloseIcon
+                onClose={() => setOpen(false)}
+                title={'Forcibly Stop Process'}
+                confirm={'Continue'}
+                onConfirmed={onButtonClick.bind(this, 'kill-confirmed')}
+            >
+                Forcibly stopping a server can lead to data corruption.
+            </Dialog.Confirm>
+            <Can action={'control.start'}>
+                <Button
+                    className={'w-24'}
+                    disabled={status !== 'offline'}
+                    onClick={onButtonClick.bind(this, 'start')}
+                >
+                    Start
+                </Button>
+            </Can>
+            <Can action={'control.restart'}>
+                <Button.Text
+                    className={'w-24'}
+                    variant={Button.Variants.Secondary}
+                    disabled={!status}
+                    onClick={onButtonClick.bind(this, 'restart')}
+                >
+                    Restart
+                </Button.Text>
+            </Can>
+            <Can action={'control.stop'}>
+                <Button.Danger
+                    className={'w-24'}
+                    variant={killable ? undefined : Button.Variants.Secondary}
+                    disabled={status === 'offline'}
+                    onClick={onButtonClick.bind(this, killable ? 'kill' : 'stop')}
+                >
+                    {killable ? 'Kill' : 'Stop'}
+                </Button.Danger>
+            </Can>
+        </div>
+    );
+};

resources/scripts/components/server/console/StatBlock.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Icon from '@/components/elements/Icon';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
+import Tooltip from '@/components/elements/tooltip/Tooltip';
+
+interface StatBlockProps {
+    title: string;
+    description?: string;
+    color?: string | undefined;
+    icon: IconDefinition;
+    children: React.ReactNode;
+}
+
+export default ({ title, icon, color, description, children }: StatBlockProps) => {
+    return (
+        <Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
+            <div className={'flex items-center space-x-4 bg-gray-600 rounded p-4 shadow-lg'}>
+                <div
+                    className={classNames(
+                        'transition-colors duration-500',
+                        'flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-lg shadow-md',
+                        color || 'bg-gray-700',
+                    )}
+                >
+                    <Icon
+                        icon={icon}
+                        className={classNames(
+                            'w-6 h-6 m-auto',
+                            {
+                                'text-gray-100': !color || color === 'bg-gray-700',
+                                'text-gray-50': color && color !== 'bg-gray-700',
+                            },
+                        )}
+                    />
+                </div>
+                <div className={'flex flex-col justify-center overflow-hidden'}>
+                    <p className={'font-header leading-tight text-sm text-gray-200'}>{title}</p>
+                    <p className={'text-xl font-semibold text-gray-50 truncate'}>
+                        {children}
+                    </p>
+                </div>
+            </div>
+        </Tooltip>
+    );
+};