feat: add SharedStorageNode component

striker-ui/components/SharedStorage.tsx

@@ -1,9 +1,15 @@
 import { Grid } from '@material-ui/core';
-import InnerPanel from './InnerPanel';
 import Panel from './Panel';
+import SharedStorageNode from './SharedStorageNode';
 import { HeaderText, BodyText } from './Text';
+import PeriodicFetch from '../lib/fetchers/periodicFetch';
+
+const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+  const { data } = PeriodicFetch<AnvilSharedStorage>(
+    `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_shared_storage?anvil_uuid=`,
+    anvil.anvil_uuid,
+  );
 
-const SharedStorage = (): JSX.Element => {
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
@@ -14,7 +20,15 @@ const SharedStorage = (): JSX.Element => {
           <BodyText text="Mount /mnt/shared" />
         </Grid>
         <Grid item xs={12}>
-          <InnerPanel />
+          {data &&
+            data.file_systems[0]?.nodes.map(
+              (node: AnvilSharedStorageNode, index: number) => (
+                <SharedStorageNode
+                  node={{ ...node, nodeInfo: anvil.nodes[index] }}
+                  key={anvil.nodes[index].node_uuid}
+                />
+              ),
+            )}
         </Grid>
       </Grid>
     </Panel>

striker-ui/components/SharedStorageNode.tsx

@@ -0,0 +1,53 @@
+import { Grid, Switch } from '@material-ui/core';
+import * as prettyBytes from 'pretty-bytes';
+
+import InnerPanel from './InnerPanel';
+import AllocationBar from './AllocationBar';
+import { BodyText } from './Text';
+
+const SharedStorageNode = ({
+  node,
+}: {
+  node: AnvilSharedStorageNode;
+}): JSX.Element => {
+  return (
+    <InnerPanel>
+      <Grid container alignItems="center" justify="space-around">
+        <Grid item xs={6}>
+          <BodyText text={`Node: ${node.nodeInfo?.node_name}`} />
+        </Grid>
+        <Grid item xs={4}>
+          <Switch checked={node.is_mounted} />
+        </Grid>
+        <Grid item xs={4}>
+          <BodyText
+            text={`Used: ${prettyBytes.default(node.total - node.free, {
+              binary: true,
+            })}`}
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <BodyText
+            text={`Free: ${prettyBytes.default(node.free, {
+              binary: true,
+            })}`}
+          />
+        </Grid>
+        <Grid item xs={10}>
+          <AllocationBar
+            allocated={((node.total - node.free) / node.total) * 100}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <BodyText
+            text={`Total Storage: ${prettyBytes.default(node.total, {
+              binary: true,
+            })}`}
+          />
+        </Grid>
+      </Grid>
+    </InnerPanel>
+  );
+};
+
+export default SharedStorageNode;