refactor: restructure using new Node type for more flexibility in data passed to components

striker-ui/components/Anvil.tsx

@@ -8,9 +8,7 @@ const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     <>
       <Grid item xs={6}>
         <HeaderText text={anvil.anvil_name} />
-        <HeaderText
+        <HeaderText text={anvil.anvil_state || 'State unavailable'} />
-          text={anvil.anvil_status?.anvil_state || 'State unavailable'}
-        />
       </Grid>
       <Grid item xs={3}>
         <Switch checked={checked} onChange={() => setChecked(!checked)} />

striker-ui/components/AnvilNode.tsx

@@ -4,17 +4,21 @@ import InnerPanel from './InnerPanel';
 import AllocationBar from './AllocationBar';
 import { BodyText } from './Text';
 
-const AnvilNode = ({ node }: { node: AnvilStatus }): JSX.Element => {
+const AnvilNode = ({
+  node,
+}: {
+  node: Array<AnvilStatusNode & AnvilListItemNode>;
+}): JSX.Element => {
   return (
     <>
       {node &&
-        node.nodes.map(
+        node.map(
           (n): JSX.Element => {
             return (
               <InnerPanel key={n.state_message}>
                 <Grid container alignItems="center" justify="space-around">
                   <Grid item xs={6}>
-                    <BodyText text="Node: an-a01n01" />
+                    <BodyText text={`Node: ${n.node_name}`} />
                   </Grid>
                   <Grid item xs={4}>
                     <Switch checked />

striker-ui/components/Anvils.tsx

@@ -1,19 +1,22 @@
 import { Grid } from '@material-ui/core';
-import Panel from './Panel';
 import Anvil from './Anvil';
+import Panel from './Panel';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
 const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => {
-  let anvils: AnvilListItem[] = [];
+  const anvils: AnvilListItem[] = [];
-  if (list) anvils = list.anvils;
+  // if (list) anvils = list.anvils;
 
-  anvils.forEach((anvil: AnvilListItem) => {
+  list?.anvils.forEach((anvil: AnvilListItem) => {
     const { data } = PeriodicFetch<AnvilStatus>(
       `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_status?anvil_uuid=`,
       anvil.anvil_uuid,
     );
     /* eslint-disable no-param-reassign */
-    anvil.anvil_status = data;
+    anvils.push({
+      ...anvil,
+      anvil_state: data.anvil_state,
+    });
   });
 
   return (

striker-ui/components/Nodes.tsx

@@ -9,12 +9,15 @@ const Nodes = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
     anvil?.anvil_uuid,
   );
   /* eslint-disable no-param-reassign */
-  if (anvil) anvil.anvil_status = data;
 
   return (
     <Panel>
       <Text text="Nodes" />
-      <AnvilNode node={anvil?.anvil_status} />
+      <AnvilNode
+        node={anvil.nodes.map((n, index) => {
+          return { ...n, ...data.nodes[index] };
+        })}
+      />
     </Panel>
   );
 };