fix(striker-ui): simplify CPU layout

striker-ui/components/CPU.tsx

@@ -1,37 +1,40 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
-import { Box } from '@mui/material';
+
-import { Panel } from './Panels';
-import { HeaderText, BodyText } from './Text';
-import periodicFetch from '../lib/fetchers/periodicFetch';
 import { AnvilContext } from './AnvilContext';
+import FlexBox from './FlexBox';
+import { Panel, PanelHeader } from './Panels';
+import periodicFetch from '../lib/fetchers/periodicFetch';
 import Spinner from './Spinner';
+import { HeaderText, BodyText } from './Text';
 
 const CPU = (): JSX.Element => {
   const { uuid } = useContext(AnvilContext);
 
-  const { data, isLoading } = periodicFetch<AnvilCPU>(
+  const { data: { allocated = 0, cores = 0, threads = 0 } = {}, isLoading } =
-    `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`,
+    periodicFetch<AnvilCPU>(
-  );
+      `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`,
+    );
 
-  const cpuData =
+  const contentAreaElement = useMemo(
-    isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data;
+    () =>
+      isLoading ? (
+        <Spinner />
+      ) : (
+        <FlexBox spacing={0}>
+          <BodyText text={`Total Cores: ${cores}`} />
+          <BodyText text={`Total Threads: ${threads}`} />
+          <BodyText text={`Allocated Cores: ${allocated}`} />
+        </FlexBox>
+      ),
+    [allocated, cores, isLoading, threads],
+  );
 
   return (
     <Panel>
-      <HeaderText text="CPU" />
+      <PanelHeader>
-      {!isLoading ? (
+        <HeaderText text="CPU" />
-        <>
+      </PanelHeader>
-          <Box display="flex" width="100%">
+      {contentAreaElement}
-            <Box flexGrow={1} style={{ marginLeft: '1em', marginTop: '1em' }}>
-              <BodyText text={`Total Cores: ${cpuData.cores}`} />
-              <BodyText text={`Total Threads: ${cpuData.threads}`} />
-              <BodyText text={`Allocated Cores: ${cpuData.allocated}`} />
-            </Box>
-          </Box>
-        </>
-      ) : (
-        <Spinner />
-      )}
     </Panel>
   );
 };