refactor: move volumes and nested data to their own component

striker-ui/components/Resource/ResourceVolumes.tsx

@@ -0,0 +1,71 @@
+import * as prettyBytes from 'pretty-bytes';
+import { makeStyles } from '@material-ui/core/styles';
+import { Box } from '@material-ui/core';
+import { InnerPanel, PanelHeader } from '../Panels';
+import { BodyText } from '../Text';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    overflow: 'auto',
+    height: '100%',
+    paddingLeft: '.3em',
+    [theme.breakpoints.down('md')]: {
+      overflow: 'hidden',
+    },
+  },
+  state: {
+    paddingLeft: '.7em',
+    paddingRight: '.7em',
+    paddingTop: '1em',
+  },
+  bar: {
+    paddingLeft: '.7em',
+    paddingRight: '.7em',
+  },
+  header: {
+    paddingTop: '.3em',
+    paddingRight: '.7em',
+  },
+  label: {
+    paddingTop: '.3em',
+  },
+  decoratorBox: {
+    paddingRight: '.3em',
+  },
+}));
+
+const ResourceVolumes = ({
+  resource,
+}: {
+  resource: AnvilReplicatedStorage;
+}): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Box className={classes.root}>
+      {resource &&
+        resource.volumes.map((volume) => {
+          return (
+            <InnerPanel key={volume.drbd_device_minor}>
+              <PanelHeader>
+                <Box display="flex" width="100%" className={classes.header}>
+                  <Box flexGrow={1}>
+                    <BodyText text={`Volume: ${volume.number}`} />
+                  </Box>
+                  <Box>
+                    <BodyText
+                      text={`Size: ${prettyBytes.default(volume.size, {
+                        binary: true,
+                      })}`}
+                    />
+                  </Box>
+                </Box>
+              </PanelHeader>
+            </InnerPanel>
+          );
+        })}
+    </Box>
+  );
+};
+
+export default ResourceVolumes;

striker-ui/components/Resource/index.tsx

@@ -1,5 +1,6 @@
-import { Panel } from './Panels';
-import { HeaderText } from './Text';
+import { Panel } from '../Panels';
+import { HeaderText } from '../Text';
+import ResourceVolumes from './ResourceVolumes';
 
 const Resource = ({
   resource,
@@ -9,6 +10,7 @@ const Resource = ({
   return (
     <Panel>
       <HeaderText text={`Resource: ${resource.resource_name}`} />
+      <ResourceVolumes resource={resource} />
     </Panel>
   );
 };