refactor: add Decorator component

striker-ui/components/Anvils/AnvilList.tsx

@@ -1,17 +1,11 @@
 import { useContext, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { List, Box, Divider, ListItem } from '@material-ui/core';
-import {
+import { HOVER, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
-  BLUE,
-  PURPLE_OFF,
-  RED_ON,
-  HOVER,
-  DIVIDER,
-} from '../../lib/consts/DEFAULT_THEME';
 import Anvil from './Anvil';
 import { AnvilContext } from '../AnvilContext';
 import sortAnvils from './sortAnvils';
+import Decorator, { Colours } from '../Decorator';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -35,34 +29,18 @@ const useStyles = makeStyles((theme) => ({
   anvil: {
     paddingLeft: 0,
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  optimal: {
-    backgroundColor: BLUE,
-  },
-  notReady: {
-    backgroundColor: PURPLE_OFF,
-  },
-  degraded: {
-    backgroundColor: RED_ON,
-  },
 }));
 
-const selectDecorator = (
+const selectDecorator = (state: string): Colours => {
-  state: string,
-): keyof ClassNameMap<'optimal' | 'notReady' | 'degraded'> => {
   switch (state) {
     case 'optimal':
-      return 'optimal';
+      return 'ok';
     case 'not_ready':
-      return 'notReady';
+      return 'warning';
     case 'degraded':
-      return 'degraded';
+      return 'error';
     default:
-      return 'optimal';
+      return 'off';
   }
 };
 
@@ -88,11 +66,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
             >
               <Box display="flex" flexDirection="row" width="100%">
                 <Box p={1}>
-                  <div
+                  <Decorator colour={selectDecorator(anvil.anvil_state)} />
-                    className={`${classes.decorator} ${
-                      classes[selectDecorator(anvil.anvil_state)]
-                    }`}
-                  />
                 </Box>
                 <Box p={1} flexGrow={1} className={classes.anvil}>
                   <Anvil anvil={anvil} />

striker-ui/components/Decorator.tsx

@@ -0,0 +1,31 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { BLUE, GREY, PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+
+export type Colours = 'ok' | 'off' | 'error' | 'warning';
+
+const useStyles = makeStyles(() => ({
+  decorator: {
+    width: '20px',
+    height: '100%',
+    borderRadius: 2,
+  },
+  ok: {
+    backgroundColor: BLUE,
+  },
+  warning: {
+    backgroundColor: PURPLE_OFF,
+  },
+  error: {
+    backgroundColor: RED_ON,
+  },
+  off: {
+    backgroundColor: GREY,
+  },
+}));
+
+const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
+  const classes = useStyles();
+  return <div className={`${classes.decorator} ${classes[colour]}`} />;
+};
+
+export default Decorator;

striker-ui/components/Network/Network.tsx

@@ -1,13 +1,13 @@
 import { useContext } from 'react';
 import { Box, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { Panel } from '../Panels';
 import { HeaderText, BodyText } from '../Text';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
-import { BLUE, PURPLE_OFF, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
+import { DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
 import { AnvilContext } from '../AnvilContext';
+import Decorator, { Colours } from '../Decorator';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -29,29 +29,16 @@ const useStyles = makeStyles((theme) => ({
   divider: {
     background: DIVIDER,
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  optimal: {
-    backgroundColor: BLUE,
-  },
-  degraded: {
-    backgroundColor: PURPLE_OFF,
-  },
 }));
 
-const selectDecorator = (
+const selectDecorator = (state: string): Colours => {
-  state: string,
-): keyof ClassNameMap<'optimal' | 'degraded'> => {
   switch (state) {
     case 'optimal':
-      return 'optimal';
+      return 'ok';
     case 'degraded':
-      return 'degraded';
+      return 'warning';
     default:
-      return 'degraded';
+      return 'warning';
   }
 };
 
@@ -80,11 +67,7 @@ const Network = (): JSX.Element => {
                   className={classes.root}
                 >
                   <Box p={1} className={classes.noPaddingLeft}>
-                    <div
+                    <Decorator colour={selectDecorator(bond.bond_state)} />
-                      className={`${classes.decorator} ${
-                        classes[selectDecorator(bond.bond_state)]
-                      }`}
-                    />
                   </Box>
                   <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
                     <BodyText text={bond.bond_name} />

striker-ui/components/Nodes/AnvilNode.tsx

@@ -1,12 +1,10 @@
 import { Box, Switch } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
-
 import { InnerPanel, PanelHeader } from '../Panels';
 import { ProgressBar } from '../Bars';
 import { BodyText } from '../Text';
-import { BLUE, RED_ON, TEXT, PURPLE_OFF } from '../../lib/consts/DEFAULT_THEME';
 import nodeState from '../../lib/consts/NODES';
+import Decorator, { Colours } from '../Decorator';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -34,41 +32,22 @@ const useStyles = makeStyles((theme) => ({
   label: {
     paddingTop: '5px',
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
   decoratorBox: {
     paddingRight: '5px',
   },
-  ready: {
-    backgroundColor: BLUE,
-  },
-  onAccessible: {
-    backgroundColor: PURPLE_OFF,
-  },
-  off: {
-    backgroundColor: TEXT,
-  },
-  unknown: {
-    backgroundColor: RED_ON,
-  },
 }));
 
-const selectDecorator = (
+const selectDecorator = (state: string): Colours => {
-  state: string,
-): keyof ClassNameMap<'unknown' | 'off' | 'onAccessible' | 'ready'> => {
   switch (state) {
     case 'ready':
-      return 'ready';
+      return 'ok';
     case 'off':
       return 'off';
     case 'accessible':
     case 'on':
-      return 'onAccessible';
+      return 'warning';
     default:
-      return 'unknown';
+      return 'error';
   }
 };
 
@@ -91,11 +70,7 @@ const AnvilNode = ({
                       <BodyText text={node.node_name} />
                     </Box>
                     <Box className={classes.decoratorBox}>
-                      <div
+                      <Decorator colour={selectDecorator(node.state)} />
-                        className={`${classes.decorator} ${
-                          classes[selectDecorator(node.state)]
-                        }`}
-                      />
                     </Box>
                     <Box>
                       <BodyText

striker-ui/components/Servers.tsx

@@ -1,20 +1,13 @@
 import { useContext } from 'react';
 import { List, ListItem, Divider, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { Panel } from './Panels';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { HeaderText, BodyText } from './Text';
-import {
+import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME';
-  BLUE,
-  GREY,
-  HOVER,
-  DIVIDER,
-  PURPLE_OFF,
-  RED_ON,
-} from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
+import Decorator, { Colours } from './Decorator';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -37,35 +30,16 @@ const useStyles = makeStyles((theme) => ({
   noPaddingLeft: {
     paddingLeft: 0,
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  running: {
-    backgroundColor: BLUE,
-  },
-  shut_off: {
-    backgroundColor: GREY,
-  },
-  crashed: {
-    backgroundColor: RED_ON,
-  },
-  warning: {
-    backgroundColor: PURPLE_OFF,
-  },
 }));
 
-const selectDecorator = (
+const selectDecorator = (state: string): Colours => {
-  state: string,
-): keyof ClassNameMap<'running' | 'shut_off' | 'crashed' | 'warning'> => {
   switch (state) {
     case 'running':
-      return 'running';
+      return 'ok';
     case 'shut_off':
-      return 'shut_off';
+      return 'off';
     case 'crashed':
-      return 'crashed';
+      return 'error';
     default:
       return 'warning';
   }
@@ -95,10 +69,8 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                   >
                     <Box display="flex" flexDirection="row" width="100%">
                       <Box p={1} className={classes.noPaddingLeft}>
-                        <div
+                        <Decorator
-                          className={`${classes.decorator} ${
+                          colour={selectDecorator(server.server_state)}
-                            classes[selectDecorator(server.server_state)]
-                          }`}
                         />
                       </Box>
                       <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>

striker-ui/components/SharedStorage/SharedStorageNode.tsx

@@ -1,18 +1,9 @@
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
-
 import * as prettyBytes from 'pretty-bytes';
-
 import { AllocationBar } from '../Bars';
 import { BodyText } from '../Text';
-import { BLUE, RED_ON } from '../../lib/consts/DEFAULT_THEME';
+import Decorator from '../Decorator';
-
-const selectDecorator = (
-  state: boolean,
-): keyof ClassNameMap<'mounted' | 'notMounted'> => {
-  return state ? 'mounted' : 'notMounted';
-};
 
 const useStyles = makeStyles(() => ({
   fs: {
@@ -24,20 +15,9 @@ const useStyles = makeStyles(() => ({
     paddingLeft: '10px',
     paddingRight: '10px',
   },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
   decoratorBox: {
     paddingRight: '5px',
   },
-  mounted: {
-    backgroundColor: BLUE,
-  },
-  notMounted: {
-    backgroundColor: RED_ON,
-  },
 }));
 
 const SharedStorageNode = ({
@@ -53,11 +33,7 @@ const SharedStorageNode = ({
           <BodyText text={node.nodeInfo?.node_name || 'Not Available'} />
         </Box>
         <Box className={classes.decoratorBox}>
-          <div
+          <Decorator colour={node.is_mounted ? 'ok' : 'error'} />
-            className={`${classes.decorator} ${
-              classes[selectDecorator(node.is_mounted)]
-            }`}
-          />
         </Box>
         <Box>
           <BodyText text={node.is_mounted ? 'Mounted' : 'Not Mounted'} />