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

style: add dividers between nodes and links

Browse Source
main
Josue 4 years ago committed by Tsu-ba-me
parent c31cdeec11
commit 284d536f7f
2 changed files with 81 additions and 26 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. 42
      striker-ui/components/Network/Network.tsx
  2. 65
      striker-ui/components/Servers.tsx

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

@ -30,6 +30,9 @@ const useStyles = makeStyles((theme) => ({
divider: { divider: {
background: DIVIDER, background: DIVIDER,
}, },
verticalDivider: {
height: '3.5em',
},
})); }));
const selectDecorator = (state: string): Colours => { const selectDecorator = (state: string): Colours => {
@ -76,16 +79,35 @@ const Network = (): JSX.Element => {
<BodyText text={bond.bond_name} /> <BodyText text={bond.bond_name} />
<BodyText text={`${bond.bond_speed}Mbps`} /> <BodyText text={`${bond.bond_speed}Mbps`} />
</Box> </Box>
{bond.hosts.map( <Box display="flex" style={{ paddingTop: '.5em' }}>
(host): JSX.Element => ( {bond.hosts.map(
<Box p={1} key={host.host_name}> (host, index: number): JSX.Element => (
<Box> <>
<BodyText text={host.host_name} selected={false} /> <Box
<BodyText text={host.link.link_name} /> p={1}
</Box> key={host.host_name}
</Box> style={{ paddingTop: 0, paddingBottom: 0 }}
), >
)} <Box>
<BodyText
text={host.host_name}
selected={false}
/>
<BodyText text={host.link.link_name} />
</Box>
</Box>
{index !== bond.hosts.length - 1 && (
<Divider
className={`${classes.divider} ${classes.verticalDivider}`}
// className={classes.divider}
orientation="vertical"
flexItem
/>
)}
</>
),
)}
</Box>
</Box> </Box>
<Divider className={classes.divider} /> <Divider className={classes.divider} />
</> </>

65
striker-ui/components/Servers.tsx
Unescape View File

@ -9,6 +9,7 @@ import { AnvilContext } from './AnvilContext';
import serverState from '../lib/consts/SERVERS'; import serverState from '../lib/consts/SERVERS';
import Decorator, { Colours } from './Decorator'; import Decorator, { Colours } from './Decorator';
import Spinner from './Spinner'; import Spinner from './Spinner';
import hostsSanitizer from '../lib/sanitizers/hostsSanitizer';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@ -22,6 +23,10 @@ const useStyles = makeStyles((theme) => ({
divider: { divider: {
background: DIVIDER, background: DIVIDER,
}, },
verticalDivider: {
height: '75%',
paddingTop: '1em',
},
button: { button: {
'&:hover': { '&:hover': {
backgroundColor: HOVER, backgroundColor: HOVER,
@ -31,6 +36,13 @@ const useStyles = makeStyles((theme) => ({
headerPadding: { headerPadding: {
paddingLeft: '.3em', paddingLeft: '.3em',
}, },
hostsBox: {
padding: '1em',
paddingRight: 0,
},
hostBox: {
paddingTop: 0,
},
})); }));
const selectDecorator = (state: string): Colours => { const selectDecorator = (state: string): Colours => {
@ -54,6 +66,8 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
`${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
); );
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid);
return ( return (
<Panel> <Panel>
<div className={classes.headerPadding}> <div className={classes.headerPadding}>
@ -86,22 +100,41 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
} }
/> />
</Box> </Box>
{server.server_state !== 'shut off' && <Box display="flex" className={classes.hostsBox}>
server.server_state !== 'crashed' && {server.server_state !== 'shut off' &&
anvil[ server.server_state !== 'crashed' &&
anvil.findIndex((a) => a.anvil_uuid === uuid) hostsSanitizer(anvil[anvilIndex].hosts).map(
].hosts.map( (
(host: AnvilStatusHost): JSX.Element => ( host: AnvilStatusHost,
<Box p={1} key={host.host_uuid}> index: number,
<BodyText ): JSX.Element => (
text={host.host_name} <>
selected={ <Box
server.server_host_uuid === host.host_uuid p={1}
} key={host.host_uuid}
/> className={classes.hostBox}
</Box> >
), <BodyText
)} text={host.host_name}
selected={
server.server_host_uuid ===
host.host_uuid
}
/>
</Box>
{index !==
hostsSanitizer(anvil[anvilIndex].hosts)
.length -
1 && (
<Divider
className={`${classes.divider} ${classes.verticalDivider}`}
orientation="vertical"
/>
)}
</>
),
)}
</Box>
</Box> </Box>
</ListItem> </ListItem>
<Divider className={classes.divider} /> <Divider className={classes.divider} />

Write Preview
Loading…
Cancel
Save