seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(striker-ui): migrate MUI v4->5 on Network/Network

Browse Source
main
Tsu-ba-me 3 years ago
parent a162d04ff0
commit 82a0cc950d
1 changed files with 80 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      striker-ui/components/Network/Network.tsx

145
striker-ui/components/Network/Network.tsx
Unescape View File

@ -1,6 +1,6 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { Box, Divider } from '@material-ui/core'; import { Box, Divider } from '@mui/material';
import { makeStyles } from '@material-ui/core/styles'; import { styled } from '@mui/material/styles';
import { Panel } from '../Panels'; import { Panel } from '../Panels';
import { HeaderText, BodyText } from '../Text'; import { HeaderText, BodyText } from '../Text';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
@ -13,8 +13,18 @@ import { AnvilContext } from '../AnvilContext';
import Decorator, { Colours } from '../Decorator'; import Decorator, { Colours } from '../Decorator';
import Spinner from '../Spinner'; import Spinner from '../Spinner';
const useStyles = makeStyles((theme) => ({ const PREFIX = 'Network';
container: {
const classes = {
container: `${PREFIX}-container`,
root: `${PREFIX}-root`,
noPaddingLeft: `${PREFIX}-noPaddingLeft`,
divider: `${PREFIX}-divider`,
verticalDivider: `${PREFIX}-verticalDivider`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`& .${classes.container}`]: {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '32vh', height: '32vh',
@ -24,17 +34,21 @@ const useStyles = makeStyles((theme) => ({
overflow: 'hidden', overflow: 'hidden',
}, },
}, },
root: {
[`& .${classes.root}`]: {
paddingTop: '.7em', paddingTop: '.7em',
paddingBottom: '.7em', paddingBottom: '.7em',
}, },
noPaddingLeft: {
[`& .${classes.noPaddingLeft}`]: {
paddingLeft: 0, paddingLeft: 0,
}, },
divider: {
background: DIVIDER, [`& .${classes.divider}`]: {
backgroundColor: DIVIDER,
}, },
verticalDivider: {
[`& .${classes.verticalDivider}`]: {
height: '3.5em', height: '3.5em',
}, },
})); }));
@ -54,7 +68,6 @@ const selectDecorator = (state: string): Colours => {
const Network = (): JSX.Element => { const Network = (): JSX.Element => {
const { uuid } = useContext(AnvilContext); const { uuid } = useContext(AnvilContext);
const classes = useStyles();
const { data, isLoading } = PeriodicFetch<AnvilNetwork>( const { data, isLoading } = PeriodicFetch<AnvilNetwork>(
`${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`, `${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`,
@ -63,63 +76,65 @@ const Network = (): JSX.Element => {
const processed = processNetworkData(data); const processed = processNetworkData(data);
return ( return (
<Panel> <Panel>
<HeaderText text="Network" /> <StyledDiv>
{!isLoading ? ( <HeaderText text="Network" />
<Box className={classes.container}> {!isLoading ? (
{data && <Box className={classes.container}>
processed.bonds.map((bond: ProcessedBond) => { {data &&
return ( processed.bonds.map((bond: ProcessedBond) => {
<> return (
<Box <>
display="flex" <Box
flexDirection="row" display="flex"
width="100%" flexDirection="row"
className={classes.root} width="100%"
> className={classes.root}
<Box p={1} className={classes.noPaddingLeft}> >
<Decorator colour={selectDecorator(bond.bond_state)} /> <Box p={1} className={classes.noPaddingLeft}>
</Box> <Decorator colour={selectDecorator(bond.bond_state)} />
<Box p={1} flexGrow={1} className={classes.noPaddingLeft}> </Box>
<BodyText text={bond.bond_name} /> <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
<BodyText text={`${bond.bond_speed}Mbps`} /> <BodyText text={bond.bond_name} />
</Box> <BodyText text={`${bond.bond_speed}Mbps`} />
<Box display="flex" style={{ paddingTop: '.5em' }}> </Box>
{bond.hosts.map( <Box display="flex" style={{ paddingTop: '.5em' }}>
(host, index: number): JSX.Element => ( {bond.hosts.map(
<> (host, index: number): JSX.Element => (
<Box <>
p={1} <Box
key={host.host_name} p={1}
style={{ paddingTop: 0, paddingBottom: 0 }} key={host.host_name}
> style={{ paddingTop: 0, paddingBottom: 0 }}
<Box> >
<BodyText <Box>
text={host.host_name} <BodyText
selected={false} text={host.host_name}
/> selected={false}
<BodyText text={host.link.link_name} /> />
<BodyText text={host.link.link_name} />
</Box>
</Box> </Box>
</Box> {index !== bond.hosts.length - 1 && (
{index !== bond.hosts.length - 1 && ( <Divider
<Divider className={`${classes.divider} ${classes.verticalDivider}`}
className={`${classes.divider} ${classes.verticalDivider}`} orientation="vertical"
orientation="vertical" flexItem
flexItem />
/> )}
)} </>
</> ),
), )}
)} </Box>
</Box> </Box>
</Box> <Divider className={classes.divider} />
<Divider className={classes.divider} /> </>
</> );
); })}
})} </Box>
</Box> ) : (
) : ( <Spinner />
<Spinner /> )}
)} </StyledDiv>
</Panel> </Panel>
); );
}; };

Write Preview
Loading…
Cancel
Save