From ae3f05b8f7d6f5ee88d3533ac9c98332b8e8a982 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 7 Dec 2019 11:11:40 -0800
Subject: [PATCH] Always show the resource graph boxes

---
 .../components/server/ServerConsole.tsx       |  4 ++--
 .../scripts/components/server/StatGraphs.tsx  | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 0d0c5ee61..a746e4556 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -73,7 +73,7 @@ export default () => {
         return () => {
             instance.removeListener('stats', statsListener);
         };
-    }, [ connected ]);
+    }, [ instance, connected ]);
 
     return (
         <div className={'my-10 flex'}>
@@ -135,7 +135,7 @@ export default () => {
             <div className={'flex-1 mx-4 mr-4'}>
                 <SuspenseSpinner>
                     <ChunkedConsole/>
-                    {status !== 'offline' && <ChunkedStatGraphs/>}
+                    <ChunkedStatGraphs/>
                 </SuspenseSpinner>
             </div>
         </div>
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index 92e920e3c..7de8a4d13 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -72,7 +72,8 @@ const createDefaultChart = (ctx: CanvasRenderingContext2D, options?: ChartConfig
 });
 
 export default () => {
-    const { limits } = ServerContext.useStoreState(state => state.server.data!);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
     const { connected, instance } = ServerContext.useStoreState(state => state.socket);
 
     const [ memory, setMemory ] = useState<Chart>();
@@ -152,15 +153,28 @@ export default () => {
         return () => {
             instance.removeListener('stats', statsListener);
         };
-    }, [ connected, memory, cpu ]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ instance, connected, memory, cpu ]);
 
     return (
         <div className={'flex mt-4'}>
             <TitledGreyBox title={'Memory usage'} icon={faMemory} className={'flex-1 mr-2'}>
-                <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
+                {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'}>
+                        Server is offline.
+                    </p>
+                }
             </TitledGreyBox>
             <TitledGreyBox title={'CPU usage'} icon={faMicrochip} className={'flex-1 ml-2'}>
-                <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
+                {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'}>
+                        Server is offline.
+                    </p>
+                }
             </TitledGreyBox>
         </div>
     );