Chunk out the console to only load when needed

Author: DaneEveritt

resources/scripts/components/server/ServerConsole.tsx

@@ -1,15 +1,54 @@
-import React from 'react';
-import Console from '@/components/server/Console';
+import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import classNames from 'classnames';
+import styled from 'styled-components';
+import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
+import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
+import { bytesToHuman } from '@/helpers';
+import Spinner from '@/components/elements/Spinner';
+
+const GreyBox = styled.div`
+    ${tw`mt-4 shadow-md bg-neutral-700 rounded p-3 flex text-xs`}   
+`;
+
+const ChunkedConsole = lazy(() => import('@/components/server/Console'));
 
 export default () => {
+    const [ memory, setMemory ] = useState(0);
+    const [ cpu, setCpu ] = useState(0);
+
     const server = ServerContext.useStoreState(state => state.server.data!);
     const status = ServerContext.useStoreState(state => state.status.value);
 
+    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+
+    const statsListener = (data: string) => {
+        let stats: any = {};
+        try {
+            stats = JSON.parse(data);
+        } catch (e) {
+            return;
+        }
+
+        setMemory(stats.memory_bytes);
+        setCpu(stats.cpu_absolute);
+    };
+
+    useEffect(() => {
+        if (!connected || !instance) {
+            return;
+        }
+
+        instance.addListener('stats', statsListener);
+
+        return () => {
+            instance.removeListener('stats', statsListener);
+        };
+    }, [ connected ]);
+
     return (
         <div className={'my-10 flex'}>
             <div className={'flex-1 ml-4'}>
@@ -23,20 +62,51 @@ export default () => {
                         <p className={'text-xs uppercase'}>
                             <FontAwesomeIcon
                                 icon={faCircle}
+                                fixedWidth={true}
                                 className={classNames('mr-1', {
                                     'text-red-500': status === 'offline',
-                                    'text-yellow-500': ['running', 'offline'].indexOf(status) < 0,
+                                    'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
                                     'text-green-500': status === 'running',
                                 })}
                             />
                             &nbsp;{status}
                         </p>
+                        <p className={'text-xs mt-2'}>
+                            <FontAwesomeIcon
+                                icon={faMemory}
+                                fixedWidth={true}
+                                className={'mr-1'}
+                            />
+                            &nbsp;{bytesToHuman(memory)}
+                            <span className={'text-neutral-500'}>/ {server.limits.memory} MB</span>
+                        </p>
+                        <p className={'text-xs mt-2'}>
+                            <FontAwesomeIcon
+                                icon={faMicrochip}
+                                fixedWidth={true}
+                                className={'mr-1'}
+                            />
+                            &nbsp;{cpu.toFixed(2)} %
+                        </p>
                     </div>
                 </div>
+                <GreyBox className={'justify-center'}>
+                    <button className={'btn btn-secondary btn-xs mr-2'}>Start</button>
+                    <button className={'btn btn-secondary btn-xs mr-2'}>Restart</button>
+                    <button className={'btn btn-red btn-xs'}>Stop</button>
+                </GreyBox>
             </div>
-            <div className={'mx-4 w-3/4 mr-4'}>
-                <Console/>
-            </div>
+            <React.Suspense
+                fallback={
+                    <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
+                        <Spinner centered={true} size={'normal'}/>
+                    </div>
+                }
+            >
+                <div className={'mx-4 w-3/4 mr-4'}>
+                    <ChunkedConsole/>
+                </div>
+            </React.Suspense>
         </div>
     );
 };