You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.1 KiB
39 lines
1.1 KiB
import { useContext } 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 Spinner from './Spinner'; |
|
|
|
const CPU = (): JSX.Element => { |
|
const { uuid } = useContext(AnvilContext); |
|
|
|
const { data, isLoading } = PeriodicFetch<AnvilCPU>( |
|
`${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`, |
|
); |
|
|
|
const cpuData = |
|
isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data; |
|
|
|
return ( |
|
<Panel> |
|
<HeaderText text="CPU" /> |
|
{!isLoading ? ( |
|
<> |
|
<Box display="flex" width="100%"> |
|
<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> |
|
); |
|
}; |
|
|
|
export default CPU;
|
|
|