Anvil

import { Box, styled } from '@mui/material'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useContext, useEffect, useMemo } from 'react'; import API_BASE_URL from '../../lib/consts/API_BASE_URL'; import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME'; import AnvilProvider, { AnvilContext } from '../../components/AnvilContext'; import Anvils from '../../components/Anvils'; import CPU from '../../components/CPU'; import Header from '../../components/Header'; import Hosts from '../../components/Hosts'; import Memory from '../../components/Memory'; import Network from '../../components/Network'; import { Panel } from '../../components/Panels'; import periodicFetch from '../../lib/fetchers/periodicFetch'; import Servers from '../../components/Servers'; import SharedStorage from '../../components/SharedStorage'; import Spinner from '../../components/Spinner'; import useWindowDimensions from '../../hooks/useWindowDimenions'; const PREFIX = 'Anvil'; const classes = { child: `${PREFIX}-child`, server: `${PREFIX}-server`, container: `${PREFIX}-container`, }; const StyledDiv = styled('div')(({ theme }) => ({ [`& .${classes.child}`]: { width: '22%', height: '100%', [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: { width: '50%', }, [theme.breakpoints.down('md')]: { width: '100%', }, }, [`& .${classes.server}`]: { width: '35%', height: '100%', [theme.breakpoints.down('md')]: { width: '100%', }, }, [`& .${classes.container}`]: { display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between', [theme.breakpoints.down('md')]: { display: 'block', }, }, })); const Anvil = (): JSX.Element => { const router = useRouter(); const width = useWindowDimensions(); const { anvil_uuid: queryAnvilUUID } = router.query; const { uuid: contextAnvilUUID, setAnvilUuid } = useContext(AnvilContext); const { data, isLoading } = periodicFetch( `${API_BASE_URL}/anvil/summary`, ); const contentLayoutElement = useMemo(() => { let result; if (data && width) { result = width > LARGE_MOBILE_BREAKPOINT ? ( ) : ( ); } return result; }, [data, width]); const contentAreaElement = useMemo( () => isLoading ? ( ) : ( contentLayoutElement ), [contentLayoutElement, isLoading], ); useEffect(() => { if (contextAnvilUUID === '') { setAnvilUuid(queryAnvilUUID?.toString() || ''); } }, [contextAnvilUUID, queryAnvilUUID, setAnvilUuid]); return ( Anvil

{contentAreaElement} ); }; export default Anvil;