style: change CPU component to match latest changes in the design

striker-ui/components/CPU.tsx

@@ -1,7 +1,6 @@
 import { useContext } from 'react';
 import { Box } from '@material-ui/core';
 import { Panel } from './Panels';
-import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { AnvilContext } from './AnvilContext';
@@ -22,26 +21,12 @@ const CPU = (): JSX.Element => {
       <HeaderText text="CPU" />
       {!isLoading ? (
         <>
-          {' '}
           <Box display="flex" width="100%">
-            <Box flexGrow={1}>
-              <BodyText text={`Allocated: ${cpuData.allocated}`} />
+            <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>
-              <BodyText text={`Free: ${cpuData.cores - cpuData.allocated}`} />
-            </Box>
-          </Box>
-          <Box display="flex" width="100%">
-            <Box flexGrow={1}>
-              <AllocationBar
-                allocated={(cpuData.allocated / cpuData.cores) * 100}
-              />
-            </Box>
-          </Box>
-          <Box display="flex" justifyContent="center" width="100%">
-            <BodyText
-              text={`Total Cores: ${cpuData.cores}c | ${cpuData.threads}t`}
-            />
           </Box>
         </>
       ) : (