debugged - cluster container now re renders upon state change

client/components/cluster/Pods.jsx

@@ -11,13 +11,13 @@ import {
 import Cookies from 'js-cookie';
 
 const Pods = ({ data }) => {
+  console.log('pods data', data);
+  // console.log('props', props);
   // using hooks to set state
   const [table, setTable] = useState([]); //pod data in table
   let children = [];
   data[0].children.map((child) => children.push(...child.children));
   // console.log('children', children);
-  // useEffect = Hook version of componentDidMount
-
   useEffect(() => {
     const podList = children.map((p, i) => {
       // check status - if "Running" then render green check circle
@@ -46,7 +46,7 @@ const Pods = ({ data }) => {
               <td>{p.name}</td>
               <td>{p.namespace}</td>
               <td>
-                <FontAwesomeIcon icon={faMinusCircle} color='red' />
+                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                 &nbsp;&nbsp;
                 {p.status}
               </td>
@@ -58,7 +58,8 @@ const Pods = ({ data }) => {
       }
     });
     setTable(podList);
-  }, []);
+    // use Effect will trigger every time data is changed
+  }, data);
 
   // function that adds a new Alert - gets called in ^useEffect when pod status is not "Running"
   const addAlert = async (p) => {

client/containers/Alerts_Container.jsx

@@ -11,12 +11,9 @@ import { faMinusCircle } from '@fortawesome/free-solid-svg-icons';
 
 import Cookies from 'js-cookie';
 
-// import { useCookies } from 'react-cookie';
-
 const Alerts = () => {
   let [alerts, setAlerts] = useState([]);
   const [table, setTable] = useState([]); //alert data in table
-  // console.log('cook', props.cookie);
   // useEffect = Hook version of componentDidMount
   useEffect(() => {
     console.log('cookies', Cookies.get('token'));
@@ -43,7 +40,7 @@ const Alerts = () => {
               <td>{p.name}</td>
               <td>{p.namespace}</td>
               <td>
-                <FontAwesomeIcon icon={faMinusCircle} color='red' />
+                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                 &nbsp;&nbsp;{p.status}
               </td>
               <td>{p.podIP}</td>

client/containers/Cluster_Container.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React from 'react';
 
 import Pods from '../components/cluster/Pods.jsx';
 import Nodes from '../components/cluster/Nodes.jsx';

client/containers/Main_Container.jsx

@@ -7,10 +7,12 @@ import RadialTree from '../components/visualizer/RadialTree.jsx';
 import Visualizer_Container from './Visualizer_Container.jsx';
 import Alerts_Container from './Alerts_Container.jsx';
 import Cluster_Container from './Cluster_Container.jsx';
+import Pods from '../components/cluster/Pods.jsx';
 
 const Main_Container = (props) => {
   const { path } = props;
-  // let awsApi;
+  // AWS auth under construction
+  // let awsApi; -
   // if (props.history.location.state) {
   //   awsApi = props.history.location.state.data;
   //   console.log('awsAPI', awsApi);
@@ -144,10 +146,12 @@ const Main_Container = (props) => {
       setInt = setInterval(() => {
         console.log('setInterval called');
         fetchInfo();
-      }, 1000);
+        console.log('data', data);
+        console.log('pod', pod);
+      }, 3000);
     })();
 
-    //clear settimeout when component is removed from dom
+    //clear setInterval when component is removed from dom
     return () => clearInterval(setInt);
   }, [data, path]);