refactor: modify SharedStorage to match latest chagnes in specs

striker-ui/components/SharedStorage/SharedStorage.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
+const SharedStorage = (): JSX.Element => {
   const classes = useStyles();
   const { uuid } = useContext(AnvilContext);
   const { data, isLoading } = PeriodicFetch<AnvilSharedStorage>(
@@ -35,34 +35,21 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
       <HeaderText text="Shared Storage" />
       {!isLoading ? (
         <Box className={classes.root}>
-          {data?.file_systems &&
+          {data?.storage_groups &&
-            data.file_systems.map(
+            data.storage_groups.map(
-              (fs: AnvilSharedStorageFileSystem): JSX.Element => (
+              (storageGroup: AnvilSharedStorageGroup): JSX.Element => (
-                <InnerPanel key={fs.mount_point}>
+                <InnerPanel key={storageGroup.storage_group_uuid}>
                   <PanelHeader>
                     <Box display="flex" width="100%" className={classes.header}>
                       <Box>
-                        <BodyText text={fs.mount_point} />
+                        <BodyText text={storageGroup.storage_group_name} />
                       </Box>
                     </Box>
                   </PanelHeader>
-                  {fs?.hosts &&
+                  <SharedStorageHost
-                    fs.hosts.map(
+                    group={storageGroup}
-                      (
+                    key={storageGroup.storage_group_uuid}
-                        host: AnvilSharedStorageHost,
+                  />
-                        index: number,
-                      ): JSX.Element => (
-                        <SharedStorageHost
-                          host={{
-                            ...host,
-                            ...anvil[
-                              anvil.findIndex((a) => a.anvil_uuid === uuid)
-                            ].hosts[index],
-                          }}
-                          key={fs.hosts[index].free}
-                        />
-                      ),
-                    )}
                 </InnerPanel>
               ),
             )}

striker-ui/components/SharedStorage/SharedStorageHost.tsx

@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import * as prettyBytes from 'pretty-bytes';
 import { AllocationBar } from '../Bars';
 import { BodyText } from '../Text';
-import Decorator from '../Decorator';
 
 const useStyles = makeStyles(() => ({
   fs: {
@@ -21,58 +20,53 @@ const useStyles = makeStyles(() => ({
 }));
 
 const SharedStorageHost = ({
-  host,
+  group,
 }: {
-  host: AnvilSharedStorageHost;
+  group: AnvilSharedStorageGroup;
 }): JSX.Element => {
   const classes = useStyles();
   return (
     <>
       <Box display="flex" width="100%" className={classes.fs}>
         <Box flexGrow={1}>
-          <BodyText text={host.host_name || 'Not Available'} />
+          <BodyText
-        </Box>
+            text={`Used: ${prettyBytes.default(
-        <Box className={classes.decoratorBox}>
+              group.storage_group_total - group.storage_group_free,
-          <Decorator colour={host.is_mounted ? 'ok' : 'error'} />
+              {
+                binary: true,
+              },
+            )}`}
+          />
         </Box>
         <Box>
-          <BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} />
+          <BodyText
+            text={`Free: ${prettyBytes.default(group.storage_group_free, {
+              binary: true,
+            })}`}
+          />
         </Box>
       </Box>
-      {host.is_mounted && (
+      <Box display="flex" width="100%" className={classes.bar}>
-        <>
+        <Box flexGrow={1}>
-          <Box display="flex" width="100%" className={classes.fs}>
+          <AllocationBar
-            <Box flexGrow={1}>
+            allocated={
-              <BodyText
+              ((group.storage_group_total - group.storage_group_free) /
-                text={`Used: ${prettyBytes.default(host.total - host.free, {
+                group.storage_group_total) *
-                  binary: true,
+              100
-                })}`}
+            }
-              />
+          />
-            </Box>
+        </Box>
-            <Box>
+      </Box>
-              <BodyText
+      <Box display="flex" justifyContent="center" width="100%">
-                text={`Free: ${prettyBytes.default(host.free, {
+        <BodyText
-                  binary: true,
+          text={`Total Storage: ${prettyBytes.default(
-                })}`}
+            group.storage_group_total,
-              />
+            {
-            </Box>
+              binary: true,
-          </Box>
+            },
-          <Box display="flex" width="100%" className={classes.bar}>
+          )}`}
-            <Box flexGrow={1}>
+        />
-              <AllocationBar
+      </Box>
-                allocated={((host.total - host.free) / host.total) * 100}
-              />
-            </Box>
-          </Box>
-          <Box display="flex" justifyContent="center" width="100%">
-            <BodyText
-              text={`Total Storage: ${prettyBytes.default(host.total, {
-                binary: true,
-              })}`}
-            />
-          </Box>
-        </>
-      )}
     </>
   );
 };

striker-ui/pages/index.tsx

@@ -65,7 +65,7 @@ const Home = (): JSX.Element => {
               <Servers anvil={data.anvils} />
             </Box>
             <Box className={classes.child}>
-              <SharedStorage anvil={data.anvils} />
+              <SharedStorage />
             </Box>
             <Box className={classes.child}>
               <Network />

striker-ui/types/AnvilSharedStorage.d.ts

@@ -1,16 +1,10 @@
-declare type AnvilSharedStorageHost = {
+declare type AnvilSharedStorageGroup = {
-  host_uuid: string;
+  storage_group_name: string;
-  host_name: string;
+  storage_group_uuid: string;
-  is_mounted: boolean;
+  storage_group_total: number;
-  total: number;
+  storage_group_free: number;
-  free: number;
-};
-
-declare type AnvilSharedStorageFileSystem = {
-  mount_point: string;
-  hosts: Array<AnvilSharedStorageHost>;
 };
 
 declare type AnvilSharedStorage = {
-  file_systems: Array<AnvilSharedStorageFileSystem>;
+  storage_groups: Array<AnvilSharedStorageGroup>;
 };