From 4861bbd91af08a4a40d6a3b5dcce0dc611f52f5d Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 29 Apr 2021 15:41:50 -0400
Subject: [PATCH] refactor: change server states to match values defined in the
 design document

---
 striker-ui/components/Servers.tsx | 44 +++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx
index 9c271daa..354318bc 100644
--- a/striker-ui/components/Servers.tsx
+++ b/striker-ui/components/Servers.tsx
@@ -5,8 +5,16 @@ import { ClassNameMap } from '@material-ui/styles';
 import Panel from './Panel';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { HeaderText, BodyText } from './Text';
-import { BLUE, GREY, HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME';
+import {
+  BLUE,
+  GREY,
+  HOVER,
+  DIVIDER,
+  PURPLE_OFF,
+  RED_ON,
+} from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
+import serverState from '../lib/consts/SERVERS';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -31,24 +39,32 @@ const useStyles = makeStyles(() => ({
     height: '100%',
     borderRadius: 2,
   },
-  started: {
+  running: {
     backgroundColor: BLUE,
   },
-  stopped: {
+  shut_off: {
     backgroundColor: GREY,
   },
+  crashed: {
+    backgroundColor: RED_ON,
+  },
+  warning: {
+    backgroundColor: PURPLE_OFF,
+  },
 }));
 
 const selectDecorator = (
   state: string,
-): keyof ClassNameMap<'started' | 'stopped'> => {
+): keyof ClassNameMap<'running' | 'shut_off' | 'crashed' | 'warning'> => {
   switch (state) {
-    case 'Started':
-      return 'started';
-    case 'Stopped':
-      return 'stopped';
+    case 'running':
+      return 'running';
+    case 'shut_off':
+      return 'shut_off';
+    case 'crashed':
+      return 'crashed';
     default:
-      return 'stopped';
+      return 'warning';
   }
 };
 
@@ -87,9 +103,15 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                     </Box>
                     <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
                       <BodyText text={server.server_name} />
-                      <BodyText text={server.server_state} />
+                      <BodyText
+                        text={
+                          serverState.get(server.server_state) ||
+                          'Not Available'
+                        }
+                      />
                     </Box>
-                    {server.server_state === 'Started' &&
+                    {server.server_state !== 'shut_off' &&
+                      server.server_state !== 'crashed' &&
                       anvil[
                         anvil.findIndex((a) => a.anvil_uuid === uuid)
                       ].nodes.map(