refactor: use pretty-bytes for formatting

striker-ui/components/Memory.tsx

@@ -1,26 +1,54 @@
 import { Grid } from '@material-ui/core';
+import * as prettyBytes from 'pretty-bytes';
 import Panel from './Panel';
 import AllocationBar from './AllocationBar';
 import { HeaderText, BodyText } from './Text';
+import PeriodicFetch from '../lib/fetchers/periodicFetch';
+
+const Memory = ({ uuid }: { uuid: string }): JSX.Element => {
+  const { data, isLoading } = PeriodicFetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_memory?anvil_uuid=`,
+    uuid,
+  );
+
+  const memoryData = isLoading || !data ? { total: 0, free: 0 } : data;
 
-const Memory = (): JSX.Element => {
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
         <Grid item xs={12}>
           <HeaderText text="Memory" />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={5}>
-          <BodyText text="Allocated: 14GiB" />
+          <BodyText
+            text={`Allocated: ${prettyBytes.default(
+              memoryData.total - memoryData.free,
+              {
+                binary: true,
+              },
+            )}`}
+          />
         </Grid>
         <Grid item xs={3}>
-          <BodyText text="Free: 50GiB" />
+          <BodyText
+            text={`Free: ${prettyBytes.default(memoryData.free, {
+              binary: true,
+            })}`}
+          />
         </Grid>
         <Grid item xs={10}>
-          <AllocationBar allocated={30} />
+          <AllocationBar
+            allocated={
+              ((memoryData.total - memoryData.free) / memoryData.total) * 100
+            }
+          />
         </Grid>
-        <Grid item xs={6}>
+        <Grid item xs={10}>
-          <BodyText text="Total Memory: 64GiB" />
+          <BodyText
+            text={`Total Memory: ${prettyBytes.default(memoryData.total, {
+              binary: true,
+            })}`}
+          />
         </Grid>
       </Grid>
     </Panel>