feat: add decorator to the Servers component

striker-ui/components/Servers.tsx

@@ -1,9 +1,10 @@
-import { Grid, List, ListItem, ListItemText } from '@material-ui/core';
+import { Grid, List, ListItem, Divider, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import { ClassNameMap } from '@material-ui/styles';
 import Panel from './Panel';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
-import { TEXT } from '../lib/consts/DEFAULT_THEME';
 import { HeaderText, BodyText } from './Text';
+import { BLUE, GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -19,17 +20,44 @@ const useStyles = makeStyles(() => ({
     '&:hover': {
       backgroundColor: '#F6F6E8',
     },
+    paddingLeft: 0,
+  },
+  noPaddingLeft: {
+    paddingLeft: 0,
+  },
+  decorator: {
+    width: '20px',
+    height: '100%',
+    borderRadius: 2,
+  },
+  started: {
+    backgroundColor: BLUE,
+  },
+  stopped: {
+    backgroundColor: GREY,
   },
 }));
 
+const selectDecorator = (
+  state: string,
+): keyof ClassNameMap<'started' | 'stopped'> => {
+  switch (state) {
+    case 'Started':
+      return 'started';
+    case 'Stopped':
+      return 'stopped';
+    default:
+      return 'stopped';
+  }
+};
+
 const Servers = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const classes = useStyles();
 
   const { data } = PeriodicFetch<AnvilServers>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_servers?anvil_uuid=`,
-    anvil.anvil_uuid,
+    anvil?.anvil_uuid,
   );
-
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
@@ -42,12 +70,44 @@ const Servers = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
             className={classes.root}
             aria-label="mailbox folders"
           >
-            <ListItem button className={classes.button}>
+            {data &&
-              <ListItemText
+              data.servers.map((server: AnvilServer) => {
-                primary={<BodyText text={anvil.anvil_name} />}
+                return (
-                secondary={<BodyText text={data.servers[0].server_name} />}
+                  <>
+                    <ListItem
+                      button
+                      className={classes.button}
+                      key={server.server_uuid}
+                    >
+                      <Box display="flex" flexDirection="row" width="100%">
+                        <Box p={1} className={classes.noPaddingLeft}>
+                          <div
+                            className={`${classes.decorator} ${
+                              classes[selectDecorator(server.server_state)]
+                            }`}
                           />
+                        </Box>
+                        <Box
+                          p={1}
+                          flexGrow={1}
+                          className={classes.noPaddingLeft}
+                        >
+                          <BodyText text={server.server_name} />
+                          <BodyText text={server.server_state} />
+                        </Box>
+                        {server.server_state === 'Started' && (
+                          <Box p={1}>
+                            <BodyText
+                              text={`${anvil.nodes[0].node_name} | ${anvil.nodes[1].node_name}`}
+                            />
+                          </Box>
+                        )}
+                      </Box>
                     </ListItem>
+                    <Divider className={classes.divider} />
+                  </>
+                );
+              })}
           </List>
         </Grid>
       </Grid>

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -7,3 +7,4 @@ export const PANEL_BACKGROUND = '#343434';
 export const PANEL_BORDER = '#000000';
 export const PURPLE_OFF = '#7353BA';
 export const BLUE = '#4785FF';
+export const GREY = '#E5E5E5';