feat: add decorator to Shared Storage

striker-ui/components/SharedStorageNode.tsx

@@ -1,21 +1,43 @@
 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';
+
+const selectDecorator = (
+  state: boolean,
+): keyof ClassNameMap<'mounted' | 'notMounted'> => {
+  return state ? 'mounted' : 'notMounted';
+};
 
 const useStyles = makeStyles(() => ({
   fs: {
     paddingLeft: '10px',
     paddingRight: '10px',
-    paddingTop: '10px',
+    paddingTop: '15px',
   },
   bar: {
     paddingLeft: '10px',
     paddingRight: '10px',
   },
+  decorator: {
+    width: '20px',
+    height: '100%',
+    borderRadius: 2,
+  },
+  decoratorBox: {
+    paddingRight: '5px',
+  },
+  mounted: {
+    backgroundColor: BLUE,
+  },
+  notMounted: {
+    backgroundColor: RED_ON,
+  },
 }));
 
 const SharedStorageNode = ({
@@ -24,14 +46,25 @@ const SharedStorageNode = ({
   node: AnvilSharedStorageNode;
 }): JSX.Element => {
   const classes = useStyles();
-
   return (
     <>
       <Box display="flex" width="100%" className={classes.fs}>
-        <Box>
+        <Box flexGrow={1}>
           <BodyText text={node.nodeInfo?.node_name} />
         </Box>
+        <Box className={classes.decoratorBox}>
+          <div
+            className={`${classes.decorator} ${
+              classes[selectDecorator(node.is_mounted)]
+            }`}
+          />
+        </Box>
+        <Box>
+          <BodyText text={node.is_mounted ? 'Mounted' : 'Not Mounted'} />
         </Box>
+      </Box>
+      {node.is_mounted && (
+        <>
           <Box display="flex" width="100%" className={classes.fs}>
             <Box flexGrow={1}>
               <BodyText
@@ -63,6 +96,8 @@ const SharedStorageNode = ({
             />
           </Box>
         </>
+      )}
+    </>
   );
 };