refactor: use context to display anvil info in CPU, Memory, Network, Storage and Nodes components

striker-ui/components/CPU.tsx

@@ -1,10 +1,14 @@
+import { useContext } from 'react';
 import { Box } from '@material-ui/core';
 import Panel from './Panel';
 import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import { AnvilContext } from './AnvilContext';
+
+const CPU = (): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
 
-const CPU = ({ uuid }: { uuid: string }): JSX.Element => {
   const { data, isLoading } = PeriodicFetch<AnvilCPU>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_cpu?anvil_uuid=`,
     uuid,

striker-ui/components/Memory.tsx

@@ -1,11 +1,14 @@
+import { useContext } from 'react';
 import { Box } from '@material-ui/core';
 import * as prettyBytes from 'pretty-bytes';
 import Panel from './Panel';
 import { AllocationBar } from './Bars';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import { AnvilContext } from './AnvilContext';
 
-const Memory = ({ uuid }: { uuid: string }): JSX.Element => {
+const Memory = (): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
   const { data, isLoading } = PeriodicFetch<AnvilMemory>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_memory?anvil_uuid=`,
     uuid,

striker-ui/components/Network.tsx

@@ -1,11 +1,13 @@
+import { useContext } from 'react';
 import { Box, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/styles';
 import Panel from './Panel';
 import { HeaderText, BodyText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
-import { BLUE, PURPLE_OFF, GREY } from '../lib/consts/DEFAULT_THEME';
+import { BLUE, PURPLE_OFF, DIVIDER } from '../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
+import { AnvilContext } from './AnvilContext';
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -21,7 +23,7 @@ const useStyles = makeStyles(() => ({
     paddingLeft: 0,
   },
   divider: {
-    background: GREY,
+    background: DIVIDER,
   },
   decorator: {
     width: '20px',
@@ -49,12 +51,13 @@ const selectDecorator = (
   }
 };
 
-const Network = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+const Network = (): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
 
   const { data } = PeriodicFetch<AnvilNetwork>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_network?anvil_uuid=`,
-    anvil?.anvil_uuid,
+    uuid,
   );
 
   const processed = processNetworkData(data);

striker-ui/components/Nodes/index.tsx

@@ -1,22 +1,30 @@
+import { useContext } from 'react';
 import Panel from '../Panel';
 import Text from '../Text/HeaderText';
 import AnvilNode from './AnvilNode';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
+import { AnvilContext } from '../AnvilContext';
+
+const Nodes = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
 
-const Nodes = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const { data } = PeriodicFetch<AnvilStatus>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_status?anvil_uuid=`,
-    anvil?.anvil_uuid,
+    uuid,
   );
 
   return (
     <Panel>
       <Text text="Nodes" />
-      <AnvilNode
-        nodes={anvil?.nodes.map((node, index) => {
-          return { ...node, ...data?.nodes[index] };
-        })}
-      />
+      {anvil.findIndex((a) => a.anvil_uuid === uuid) !== -1 && (
+        <AnvilNode
+          nodes={anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)].nodes.map(
+            (node, index) => {
+              return { ...node, ...data?.nodes[index] };
+            },
+          )}
+        />
+      )}
     </Panel>
   );
 };

striker-ui/components/SharedStorage.tsx

@@ -1,16 +1,19 @@
-import { Box } from '@material-ui/core';
+import { useContext } from 'react';
 
+import { Box } from '@material-ui/core';
 import { BodyText, HeaderText } from './Text';
 import Panel from './Panel';
 import SharedStorageNode from './SharedStorageNode';
 import InnerPanel from './InnerPanel';
 import PanelHeader from './PanelHeader';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import { AnvilContext } from './AnvilContext';
 
-const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
+  const { uuid } = useContext(AnvilContext);
   const { data } = PeriodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_shared_storage?anvil_uuid=`,
-    anvil?.anvil_uuid,
+    uuid,
   );
   return (
     <Panel>
@@ -33,8 +36,13 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
                     index: number,
                   ): JSX.Element => (
                     <SharedStorageNode
-                      node={{ ...node, nodeInfo: anvil.nodes[index] }}
-                      key={anvil.nodes[index].node_uuid}
+                      node={{
+                        ...node,
+                        nodeInfo:
+                          anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)]
+                            .nodes[index],
+                      }}
+                      key={fs.nodes[index].free}
                     />
                   ),
                 )}