fix(striker-ui): avoid crash in Memory when returned data is incomplete

striker-ui/components/Memory.tsx

@@ -1,12 +1,13 @@
 import { useContext } from 'react';
 import { Box } from '@mui/material';
 import * as prettyBytes from 'pretty-bytes';
-import { Panel } from './Panels';
+
+import { AnvilContext } from './AnvilContext';
 import { AllocationBar } from './Bars';
-import { HeaderText, BodyText } from './Text';
+import { Panel } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
-import { AnvilContext } from './AnvilContext';
 import Spinner from './Spinner';
+import { HeaderText, BodyText } from './Text';
 
 const Memory = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
@@ -14,46 +15,39 @@ const Memory = (): JSX.Element => {
     `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
   );
 
-  const memoryData =
+  const { allocated = 0, total = 0, reserved = 0 } = data ?? {};
-    isLoading || !data ? { total: 0, allocated: 0, reserved: 0 } : data;
 
   return (
     <Panel>
       <HeaderText text="Memory" />
       {!isLoading ? (
         <>
-          {' '}
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
               <BodyText
-                text={`Allocated: ${prettyBytes.default(memoryData.allocated, {
+                text={`Allocated: ${prettyBytes.default(allocated, {
                   binary: true,
                 })}`}
               />
             </Box>
             <Box>
               <BodyText
-                text={`Free: ${prettyBytes.default(
+                text={`Free: ${prettyBytes.default(total - allocated, {
-                  memoryData.total - memoryData.allocated,
+                  binary: true,
-                  {
+                })}`}
-                    binary: true,
-                  },
-                )}`}
               />
             </Box>
           </Box>
           <Box display="flex" width="100%">
             <Box flexGrow={1}>
-              <AllocationBar
+              <AllocationBar allocated={(allocated / total) * 100} />
-                allocated={(memoryData.allocated / memoryData.total) * 100}
-              />
             </Box>
           </Box>
           <Box display="flex" justifyContent="center" width="100%">
             <BodyText
-              text={`Total: ${prettyBytes.default(memoryData.total, {
+              text={`Total: ${prettyBytes.default(total, {
                 binary: true,
-              })} | Reserved: ${prettyBytes.default(memoryData.reserved, {
+              })} | Reserved: ${prettyBytes.default(reserved, {
                 binary: true,
               })}`}
             />