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.file_systems.map(
-              (fs: AnvilSharedStorageFileSystem): JSX.Element => (
-                <InnerPanel key={fs.mount_point}>
+          {data?.storage_groups &&
+            data.storage_groups.map(
+              (storageGroup: AnvilSharedStorageGroup): JSX.Element => (
+                <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 &&
-                    fs.hosts.map(
-                      (
-                        host: AnvilSharedStorageHost,
-                        index: number,
-                      ): JSX.Element => (
                   <SharedStorageHost
-                          host={{
-                            ...host,
-                            ...anvil[
-                              anvil.findIndex((a) => a.anvil_uuid === uuid)
-                            ].hosts[index],
-                          }}
-                          key={fs.hosts[index].free}
+                    group={storageGroup}
+                    key={storageGroup.storage_group_uuid}
                   />
-                      ),
-                    )}
                 </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,37 +20,27 @@ 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'} />
-        </Box>
-        <Box className={classes.decoratorBox}>
-          <Decorator colour={host.is_mounted ? 'ok' : 'error'} />
-        </Box>
-        <Box>
-          <BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} />
-        </Box>
-      </Box>
-      {host.is_mounted && (
     <>
       <Box display="flex" width="100%" className={classes.fs}>
         <Box flexGrow={1}>
           <BodyText
-                text={`Used: ${prettyBytes.default(host.total - host.free, {
+            text={`Used: ${prettyBytes.default(
+              group.storage_group_total - group.storage_group_free,
+              {
                 binary: true,
-                })}`}
+              },
+            )}`}
           />
         </Box>
         <Box>
           <BodyText
-                text={`Free: ${prettyBytes.default(host.free, {
+            text={`Free: ${prettyBytes.default(group.storage_group_free, {
               binary: true,
             })}`}
           />
@@ -60,20 +49,25 @@ const SharedStorageHost = ({
       <Box display="flex" width="100%" className={classes.bar}>
         <Box flexGrow={1}>
           <AllocationBar
-                allocated={((host.total - host.free) / host.total) * 100}
+            allocated={
+              ((group.storage_group_total - group.storage_group_free) /
+                group.storage_group_total) *
+              100
+            }
           />
         </Box>
       </Box>
       <Box display="flex" justifyContent="center" width="100%">
         <BodyText
-              text={`Total Storage: ${prettyBytes.default(host.total, {
+          text={`Total Storage: ${prettyBytes.default(
+            group.storage_group_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 = {
-  host_uuid: string;
-  host_name: string;
-  is_mounted: boolean;
-  total: number;
-  free: number;
-};
-
-declare type AnvilSharedStorageFileSystem = {
-  mount_point: string;
-  hosts: Array<AnvilSharedStorageHost>;
+declare type AnvilSharedStorageGroup = {
+  storage_group_name: string;
+  storage_group_uuid: string;
+  storage_group_total: number;
+  storage_group_free: number;
 };
 
 declare type AnvilSharedStorage = {
-  file_systems: Array<AnvilSharedStorageFileSystem>;
+  storage_groups: Array<AnvilSharedStorageGroup>;
 };