feat: add network component and data processing module

striker-ui/components/Network.tsx

@@ -1,15 +1,97 @@
-import { Grid } from '@material-ui/core';
+import { Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { ClassNameMap } from '@material-ui/styles';
 import Panel from './Panel';
-import { HeaderText } from './Text';
+import { HeaderText, BodyText } from './Text';
+import PeriodicFetch from '../lib/fetchers/periodicFetch';
+import { BLUE, GREY, TEXT, HOVER } from '../lib/consts/DEFAULT_THEME';
+import processNetworkData from './processNetwork';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    width: '100%',
+  },
+  divider: {
+    background: TEXT,
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: HOVER,
+    },
+    paddingLeft: 0,
+  },
+  noPaddingLeft: {
+    paddingLeft: 0,
+  },
+  decorator: {
+    width: '20px',
+    height: '100%',
+    borderRadius: 2,
+  },
+  started: {
+    backgroundColor: BLUE,
+  },
+  stopped: {
+    backgroundColor: GREY,
+  },
+}));
+
+const selectDecorator = (
+  state: string,
+): keyof ClassNameMap<'started' | 'stopped'> => {
+  switch (state) {
+    case 'Started':
+      return 'started';
+    case 'Stopped':
+      return 'stopped';
+    default:
+      return 'stopped';
+  }
+};
+
+const Network = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
+  const classes = useStyles();
+
+  const { data } = PeriodicFetch<AnvilNetwork>(
+    `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_network?anvil_uuid=`,
+    anvil?.anvil_uuid,
+  );
+
+  const processed = processNetworkData(data);
 
-const Network = (): JSX.Element => {
   return (
     <Panel>
-      <Grid container alignItems="center" justify="space-around">
-        <Grid item xs={12}>
-          <HeaderText text="Network" />
-        </Grid>
-      </Grid>
+      <HeaderText text="Network" />
+      {data &&
+        processed.bonds.map((bond: ProcessedBond) => {
+          return (
+            <>
+              <Box display="flex" flexDirection="row" width="100%">
+                <Box p={1} className={classes.noPaddingLeft}>
+                  <div
+                    className={`${classes.decorator} ${
+                      classes[selectDecorator('Started')]
+                    }`}
+                  />
+                </Box>
+                <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
+                  <BodyText text={bond.bond_name} />
+                  <BodyText text="Speed" />
+                </Box>
+                {bond.nodes.map(
+                  (node): JSX.Element => (
+                    <Box p={1} key={node.host_name}>
+                      <Box>
+                        <BodyText text={node.host_name} />
+                        <BodyText text={node.link.link_name} />
+                      </Box>
+                    </Box>
+                  ),
+                )}
+              </Box>
+            </>
+          );
+        })}
     </Panel>
   );
 };

striker-ui/components/processNetwork.ts

@@ -0,0 +1,36 @@
+const processNetworkData = (data: AnvilNetwork): ProcessedNetwork => {
+  const processedBonds: string[] = [];
+  const thingy: ProcessedNetwork = { bonds: [] };
+
+  data?.nodes.forEach((node) => {
+    node.bonds.forEach((bond) => {
+      const index = processedBonds.findIndex(
+        (processed: string) => processed === bond.bond_name,
+      );
+
+      if (index === -1) {
+        processedBonds.push(bond.bond_name);
+        thingy.bonds.push({
+          bond_name: bond.bond_name,
+          bond_uuid: bond.bond_uuid,
+          nodes: [
+            {
+              host_name: node.host_name,
+              host_uuid: node.host_uuid,
+              link: bond.links[0].is_active ? bond.links[0] : bond.links[1],
+            },
+          ],
+        });
+      } else {
+        thingy.bonds[index].nodes.push({
+          host_name: node.host_name,
+          host_uuid: node.host_uuid,
+          link: bond.links[0].is_active ? bond.links[0] : bond.links[1],
+        });
+      }
+    });
+  });
+  return thingy;
+};
+
+export default processNetworkData;

striker-ui/types/AnvilNetwork.d.ts

@@ -0,0 +1,43 @@
+declare type AnvilNetworkBondLink = {
+  link_name: string;
+  link_uuid: string;
+  link_speed: number;
+  link_state: 'optimal' | 'degraded';
+  is_active: boolean;
+};
+
+declare type AnvilNetworkNodeBond = {
+  bond_name: string;
+  bond_uuid: string;
+  links: Array<AnvilNetworkBondLink>;
+};
+
+declare type AnvilNetworkNode = {
+  host_name: string;
+  host_uuid: string;
+  bonds: Array<AnvilNetworkNodeBond>;
+};
+
+declare type AnvilNetwork = {
+  nodes: Array<AnvilNetworkNode>;
+};
+
+declare type ProcessedBond = {
+  bond_name: string;
+  bond_uuid: string;
+  nodes: Array<{
+    host_name: string;
+    host_uuid: string;
+    link: {
+      link_name: string;
+      link_uuid: string;
+      link_speed: number;
+      link_state: 'optimal' | 'degraded';
+      is_active: boolean;
+    };
+  }>;
+};
+
+declare type ProcessedNetwork = {
+  bonds: Array<ProcessedBond>;
+};