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,16 +79,35 @@ const Network = (): JSX.Element => {
                       <BodyText text={bond.bond_name} />
                       <BodyText text={`${bond.bond_speed}Mbps`} />
                     </Box>
-                    {bond.hosts.map(
-                      (host): JSX.Element => (
-                        <Box p={1} key={host.host_name}>
-                          <Box>
-                            <BodyText text={host.host_name} selected={false} />
-                            <BodyText text={host.link.link_name} />
-                          </Box>
-                        </Box>
-                      ),
-                    )}
+                    <Box display="flex" style={{ paddingTop: '.5em' }}>
+                      {bond.hosts.map(
+                        (host, index: number): JSX.Element => (
+                          <>
+                            <Box
+                              p={1}
+                              key={host.host_name}
+                              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>
                   <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,22 +100,41 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                             }
                           />
                         </Box>
-                        {server.server_state !== 'shut off' &&
-                          server.server_state !== 'crashed' &&
-                          anvil[
-                            anvil.findIndex((a) => a.anvil_uuid === uuid)
-                          ].hosts.map(
-                            (host: AnvilStatusHost): JSX.Element => (
-                              <Box p={1} key={host.host_uuid}>
-                                <BodyText
-                                  text={host.host_name}
-                                  selected={
-                                    server.server_host_uuid === host.host_uuid
-                                  }
-                                />
-                              </Box>
-                            ),
-                          )}
+                        <Box display="flex" className={classes.hostsBox}>
+                          {server.server_state !== 'shut off' &&
+                            server.server_state !== 'crashed' &&
+                            hostsSanitizer(anvil[anvilIndex].hosts).map(
+                              (
+                                host: AnvilStatusHost,
+                                index: number,
+                              ): 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
+                                      }
+                                    />
+                                  </Box>
+                                  {index !==
+                                    hostsSanitizer(anvil[anvilIndex].hosts)
+                                      .length -
+                                      1 && (
+                                    <Divider
+                                      className={`${classes.divider} ${classes.verticalDivider}`}
+                                      orientation="vertical"
+                                    />
+                                  )}
+                                </>
+                              ),
+                            )}
+                        </Box>
                       </Box>
                     </ListItem>
                     <Divider className={classes.divider} />