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,44 +46,57 @@ 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>
+        <Box className={classes.decoratorBox}>
-      <Box display="flex" width="100%" className={classes.fs}>
+          <div
-        <Box flexGrow={1}>
+            className={`${classes.decorator} ${
-          <BodyText
+              classes[selectDecorator(node.is_mounted)]
-            text={`Used: ${prettyBytes.default(node.total - node.free, {
+            }`}
-              binary: true,
-            })}`}
           />
         </Box>
         <Box>
-          <BodyText
+          <BodyText text={node.is_mounted ? 'Mounted' : 'Not Mounted'} />
-            text={`Free: ${prettyBytes.default(node.free, {
-              binary: true,
-            })}`}
-          />
         </Box>
       </Box>
-      <Box display="flex" width="100%" className={classes.bar}>
+      {node.is_mounted && (
-        <Box flexGrow={1}>
+        <>
-          <AllocationBar
+          <Box display="flex" width="100%" className={classes.fs}>
-            allocated={((node.total - node.free) / node.total) * 100}
+            <Box flexGrow={1}>
-          />
+              <BodyText
-        </Box>
+                text={`Used: ${prettyBytes.default(node.total - node.free, {
-      </Box>
+                  binary: true,
-      <Box display="flex" justifyContent="center" width="100%">
+                })}`}
-        <BodyText
+              />
-          text={`Total Storage: ${prettyBytes.default(node.total, {
+            </Box>
-            binary: true,
+            <Box>
-          })}`}
+              <BodyText
-        />
+                text={`Free: ${prettyBytes.default(node.free, {
-      </Box>
+                  binary: true,
+                })}`}
+              />
+            </Box>
+          </Box>
+          <Box display="flex" width="100%" className={classes.bar}>
+            <Box flexGrow={1}>
+              <AllocationBar
+                allocated={((node.total - node.free) / node.total) * 100}
+              />
+            </Box>
+          </Box>
+          <Box display="flex" justifyContent="center" width="100%">
+            <BodyText
+              text={`Total Storage: ${prettyBytes.default(node.total, {
+                binary: true,
+              })}`}
+            />
+          </Box>
+        </>
+      )}
     </>
   );
 };