Merge branch 'develop' into feature/react-admin

resources/scripts/components/dashboard/ServerRow.tsx

@@ -76,6 +76,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
 
     const diskLimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : 'Unlimited';
     const memoryLimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
+    const cpuLimit = server.limits.cpu !== 0 ? server.limits.cpu + ' %' : 'Unlimited';
 
     return (
         <StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
@@ -130,11 +131,14 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             <Spinner size={'small'}/>
                     :
                     <React.Fragment>
-                        <div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
-                            <Icon icon={faMicrochip} $alarm={alarms.cpu}/>
-                            <IconDescription $alarm={alarms.cpu}>
-                                {stats.cpuUsagePercent} %
-                            </IconDescription>
+                        <div css={tw`flex-1 ml-4 sm:block hidden`}>
+                            <div css={tw`flex justify-center`}>
+                                <Icon icon={faMicrochip} $alarm={alarms.cpu}/>
+                                <IconDescription $alarm={alarms.cpu}>
+                                    {stats.cpuUsagePercent.toFixed(2)} %
+                                </IconDescription>
+                            </div>
+                            <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {cpuLimit}</p>
                         </div>
                         <div css={tw`flex-1 ml-4 sm:block hidden`}>
                             <div css={tw`flex justify-center`}>

resources/scripts/components/server/Console.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ITerminalOptions, Terminal } from 'xterm';
+import { Terminal, ITerminalOptions } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';
 import { SearchBarAddon } from 'xterm-addon-search-bar';
 import { WebLinksAddon } from 'xterm-addon-web-links';
+import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
 import styled from 'styled-components/macro';
@@ -73,6 +74,7 @@ export default () => {
     const searchAddon = new SearchAddon();
     const searchBar = new SearchBarAddon({ searchAddon });
     const webLinksAddon = new WebLinksAddon();
+    const scrollDownHelperAddon = new ScrollDownHelperAddon();
     const { connected, instance } = ServerContext.useStoreState(state => state.socket);
     const [ canSendCommands ] = usePermissions([ 'control.console' ]);
     const serverId = ServerContext.useStoreState(state => state.server.data!.id);
@@ -140,6 +142,7 @@ export default () => {
             terminal.loadAddon(searchAddon);
             terminal.loadAddon(searchBar);
             terminal.loadAddon(webLinksAddon);
+            terminal.loadAddon(scrollDownHelperAddon);
 
             terminal.open(ref.current);
             fitAddon.fit();
@@ -201,7 +204,7 @@ export default () => {
 
     return (
         <div css={tw`text-xs font-mono relative`}>
-            <SpinnerOverlay visible={!connected} size={'large'}/>
+            <SpinnerOverlay visible={!connected} size={'large'} />
             <div
                 css={[
                     tw`rounded-t p-2 bg-black w-full`,
@@ -209,21 +212,21 @@ export default () => {
                 ]}
                 style={{ minHeight: '16rem' }}
             >
-                <TerminalDiv id={'terminal'} ref={ref}/>
+                <TerminalDiv id={'terminal'} ref={ref} />
             </div>
             {canSendCommands &&
-            <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
-                <div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
-                <div css={tw`w-full`}>
-                    <CommandInput
-                        type={'text'}
-                        placeholder={'Type a command...'}
-                        aria-label={'Console command input.'}
-                        disabled={!instance || !connected}
-                        onKeyDown={handleCommandKeyDown}
-                    />
+                <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
+                    <div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
+                    <div css={tw`w-full`}>
+                        <CommandInput
+                            type={'text'}
+                            placeholder={'Type a command...'}
+                            aria-label={'Console command input.'}
+                            disabled={!instance || !connected}
+                            onKeyDown={handleCommandKeyDown}
+                        />
+                    </div>
                 </div>
-            </div>
             }
         </div>
     );

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -74,6 +74,7 @@ const ServerDetailsBlock = () => {
 
     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}>
@@ -96,6 +97,7 @@ const ServerDetailsBlock = () => {
             </CopyOnClick>
             <p css={tw`text-xs mt-2`}>
                 <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
+                <span css={tw`text-neutral-500`}> / {cpuLimit}</span>
             </p>
             <p css={tw`text-xs mt-2`}>
                 <FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(stats.memory)}

resources/scripts/components/server/StatGraphs.tsx

@@ -96,7 +96,7 @@ export default () => {
 
         setCpu(
             new Chart(node.getContext('2d')!, chartDefaults({
-                callback: (value) => `${value}%`,
+                callback: (value) => `${value}%  `,
             })),
         );
     }, []);

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -62,7 +62,7 @@ export default () => {
                             </p>
                         }
                         <Can action={'database.create'}>
-                            <div css={tw`mt-6 sm:flex items-center justify-end`}>
+                            <div css={tw`mt-6 flex items-center justify-end`}>
                                 {(databaseLimit > 0 && databases.length > 0) &&
                                 <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
                                     {databases.length} of {databaseLimit} databases have been allocated to this
@@ -70,7 +70,7 @@ export default () => {
                                 </p>
                                 }
                                 {databaseLimit > 0 && databaseLimit !== databases.length &&
-                                    <CreateDatabaseButton css={tw`w-full sm:w-auto`}/>
+                                    <CreateDatabaseButton css={tw`flex justify-end mt-6`}/>
                                 }
                             </div>
                         </Can>