diff --git a/striker-ui/components/Network/Network.tsx b/striker-ui/components/Network/Network.tsx index 04b2eece..e586d1d1 100644 --- a/striker-ui/components/Network/Network.tsx +++ b/striker-ui/components/Network/Network.tsx @@ -30,6 +30,9 @@ const useStyles = makeStyles((theme) => ({ divider: { background: DIVIDER, }, + verticalDivider: { + height: '3.5em', + }, })); const selectDecorator = (state: string): Colours => { @@ -76,16 +79,35 @@ const Network = (): JSX.Element => { - {bond.hosts.map( - (host): JSX.Element => ( - - - - - - - ), - )} + + {bond.hosts.map( + (host, index: number): JSX.Element => ( + <> + + + + + + + {index !== bond.hosts.length - 1 && ( + + )} + + ), + )} + diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index f0685cd2..99328827 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -9,6 +9,7 @@ import { AnvilContext } from './AnvilContext'; import serverState from '../lib/consts/SERVERS'; import Decorator, { Colours } from './Decorator'; import Spinner from './Spinner'; +import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; const useStyles = makeStyles((theme) => ({ root: { @@ -22,6 +23,10 @@ const useStyles = makeStyles((theme) => ({ divider: { background: DIVIDER, }, + verticalDivider: { + height: '75%', + paddingTop: '1em', + }, button: { '&:hover': { backgroundColor: HOVER, @@ -31,6 +36,13 @@ const useStyles = makeStyles((theme) => ({ headerPadding: { paddingLeft: '.3em', }, + hostsBox: { + padding: '1em', + paddingRight: 0, + }, + hostBox: { + paddingTop: 0, + }, })); 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}`, ); + const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); + return (
@@ -86,22 +100,41 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { } /> - {server.server_state !== 'shut off' && - server.server_state !== 'crashed' && - anvil[ - anvil.findIndex((a) => a.anvil_uuid === uuid) - ].hosts.map( - (host: AnvilStatusHost): JSX.Element => ( - - - - ), - )} + + {server.server_state !== 'shut off' && + server.server_state !== 'crashed' && + hostsSanitizer(anvil[anvilIndex].hosts).map( + ( + host: AnvilStatusHost, + index: number, + ): JSX.Element => ( + <> + + + + {index !== + hostsSanitizer(anvil[anvilIndex].hosts) + .length - + 1 && ( + + )} + + ), + )} +