refactor: change component nesting to group shared storage by file system

striker-ui/components/SharedStorage.tsx

@@ -1,6 +1,10 @@
+import { Box } from '@material-ui/core';
+
+import { BodyText, HeaderText } from './Text';
 import Panel from './Panel';
 import SharedStorageNode from './SharedStorageNode';
-import { HeaderText } from './Text';
+import InnerPanel from './InnerPanel';
+import PanelHeader from './PanelHeader';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
 const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
@@ -8,19 +12,35 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_shared_storage?anvil_uuid=`,
     anvil?.anvil_uuid,
   );
-
   return (
     <Panel>
       <HeaderText text="Shared Storage" />
-      {data &&
-        data.file_systems[0]?.nodes.map(
-          (node: AnvilSharedStorageNode, index: number): JSX.Element => (
+      {data?.file_systems &&
+        data.file_systems.map(
+          (fs: AnvilSharedStorageFileSystem): JSX.Element => (
+            <InnerPanel key={fs.mount_point}>
+              <PanelHeader>
+                <Box display="flex" width="100%">
+                  <Box>
+                    <BodyText text={fs.mount_point} />
+                  </Box>
+                </Box>
+              </PanelHeader>
+              {fs?.nodes &&
+                fs.nodes.map(
+                  (
+                    node: AnvilSharedStorageNode,
+                    index: number,
+                  ): JSX.Element => (
                     <SharedStorageNode
                       node={{ ...node, nodeInfo: anvil.nodes[index] }}
                       key={anvil.nodes[index].node_uuid}
                     />
                   ),
                 )}
+            </InnerPanel>
+          ),
+        )}
     </Panel>
   );
 };

striker-ui/components/SharedStorageNode.tsx

@@ -3,16 +3,14 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import * as prettyBytes from 'pretty-bytes';
 
-import InnerPanel from './InnerPanel';
 import { AllocationBar } from './Bars';
 import { BodyText } from './Text';
-import PanelHeader from './PanelHeader';
 
 const useStyles = makeStyles(() => ({
   fs: {
     paddingLeft: '10px',
     paddingRight: '10px',
-    paddingTop: '20px',
+    paddingTop: '10px',
   },
   bar: {
     paddingLeft: '10px',
@@ -28,14 +26,12 @@ const SharedStorageNode = ({
   const classes = useStyles();
 
   return (
-    <InnerPanel>
-      <PanelHeader>
-        <Box display="flex" width="100%">
+    <>
+      <Box display="flex" width="100%" className={classes.fs}>
         <Box>
           <BodyText text={node.nodeInfo?.node_name} />
         </Box>
       </Box>
-      </PanelHeader>
       <Box display="flex" width="100%" className={classes.fs}>
         <Box flexGrow={1}>
           <BodyText
@@ -66,7 +62,7 @@ const SharedStorageNode = ({
           })}`}
         />
       </Box>
-    </InnerPanel>
+    </>
   );
 };