From 0cfe18904f4d552e4012019bc214a80c0ff0fc78 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 20 May 2021 18:59:29 -0400
Subject: [PATCH] refactor: move volumes and nested data to their own component

---
 .../components/Resource/ResourceVolumes.tsx   | 71 +++++++++++++++++++
 .../{Resource.tsx => Resource/index.tsx}      |  6 +-
 2 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 striker-ui/components/Resource/ResourceVolumes.tsx
 rename striker-ui/components/{Resource.tsx => Resource/index.tsx} (57%)

diff --git a/striker-ui/components/Resource/ResourceVolumes.tsx b/striker-ui/components/Resource/ResourceVolumes.tsx
new file mode 100644
index 00000000..a905913d
--- /dev/null
+++ b/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;
diff --git a/striker-ui/components/Resource.tsx b/striker-ui/components/Resource/index.tsx
similarity index 57%
rename from striker-ui/components/Resource.tsx
rename to striker-ui/components/Resource/index.tsx
index eccac4bd..2865d4be 100644
--- a/striker-ui/components/Resource.tsx
+++ b/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>
   );
 };