refactor: add propper decorator selector for selected anvil

striker-ui/components/Anvils/Anvil.tsx

@@ -1,10 +1,13 @@
 import { BodyText } from '../Text';
+import anvilState from './CONSTS';
 
 const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   return (
     <>
       <BodyText text={anvil.anvil_name} />
-      <BodyText text={anvil.anvil_state || 'State unavailable'} />
+      <BodyText
+        text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
+      />
     </>
   );
 };

striker-ui/components/Anvils/CONSTS.ts

@@ -0,0 +1,7 @@
+const anvilState: ReadonlyMap<string, string> = new Map([
+  ['optimal', 'Optimal'],
+  ['not_ready', 'Not Ready'],
+  ['degraded', 'Degraded'],
+]);
+
+export default anvilState;

striker-ui/components/Anvils/SelectedAnvil.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { Switch, Box } from '@material-ui/core';
+import { ClassNameMap } from '@material-ui/styles';
 import { makeStyles } from '@material-ui/core/styles';
 import { HeaderText } from '../Text';
-import { BLUE } from '../../lib/consts/DEFAULT_THEME';
+import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME';
+import anvilState from './CONSTS';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -17,11 +19,34 @@ const useStyles = makeStyles(() => ({
   decorator: {
     width: '20px',
     height: '100%',
-    backgroundColor: BLUE,
     borderRadius: 2,
   },
+  optimal: {
+    backgroundColor: BLUE,
+  },
+  notReady: {
+    backgroundColor: PURPLE_OFF,
+  },
+  degraded: {
+    backgroundColor: RED_ON,
+  },
 }));
 
+const selectDecorator = (
+  state: string,
+): keyof ClassNameMap<'optimal' | 'notReady' | 'degraded'> => {
+  switch (state) {
+    case 'optimal':
+      return 'optimal';
+    case 'not_ready':
+      return 'notReady';
+    case 'degraded':
+      return 'degraded';
+    default:
+      return 'optimal';
+  }
+};
+
 const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const classes = useStyles();
   const [checked, setChecked] = useState<boolean>(true);
@@ -29,11 +54,17 @@ const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   return (
     <Box display="flex" flexDirection="row" width="100%">
       <Box p={1}>
-        <div className={classes.decorator} />
+        <div
+          className={`${classes.decorator} ${
+            classes[selectDecorator(anvil.anvil_state)]
+          }`}
+        />
       </Box>
       <Box p={1} flexGrow={1} className={classes.anvilName}>
         <HeaderText text={anvil?.anvil_name} />
-        <HeaderText text={anvil?.anvil_state || 'State unavailable'} />
+        <HeaderText
+          text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
+        />
       </Box>
       <Box p={1}>
         <Switch checked={checked} onChange={() => setChecked(!checked)} />