style: add dividers between nodes and links

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,17 +79,36 @@ const Network = (): JSX.Element => {
                       <BodyText text={bond.bond_name} />
                       <BodyText text={`${bond.bond_speed}Mbps`} />
                     </Box>
+                    <Box display="flex" style={{ paddingTop: '.5em' }}>
                       {bond.hosts.map(
-                      (host): JSX.Element => (
+                        (host, index: number): JSX.Element => (
-                        <Box p={1} key={host.host_name}>
+                          <>
+                            <Box
+                              p={1}
+                              key={host.host_name}
+                              style={{ paddingTop: 0, paddingBottom: 0 }}
+                            >
                               <Box>
-                            <BodyText text={host.host_name} selected={false} />
+                                <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>
                   <Divider className={classes.divider} />
                 </>
               );

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 (
     <Panel>
       <div className={classes.headerPadding}>
@@ -86,23 +100,42 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                             }
                           />
                         </Box>
+                        <Box display="flex" className={classes.hostsBox}>
                           {server.server_state !== 'shut off' &&
                             server.server_state !== 'crashed' &&
-                          anvil[
+                            hostsSanitizer(anvil[anvilIndex].hosts).map(
-                            anvil.findIndex((a) => a.anvil_uuid === uuid)
+                              (
-                          ].hosts.map(
+                                host: AnvilStatusHost,
-                            (host: AnvilStatusHost): JSX.Element => (
+                                index: number,
-                              <Box p={1} key={host.host_uuid}>
+                              ): JSX.Element => (
+                                <>
+                                  <Box
+                                    p={1}
+                                    key={host.host_uuid}
+                                    className={classes.hostBox}
+                                  >
                                     <BodyText
                                       text={host.host_name}
                                       selected={
-                                    server.server_host_uuid === host.host_uuid
+                                        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>
                     </ListItem>
                     <Divider className={classes.divider} />
                   </>