Added comments

Author: mesherrera

app/components/ServiceOverview.jsx

@@ -6,28 +6,40 @@ import ServiceDetails from './ServiceDetails.jsx';
 const { ipcRenderer } = window.require('electron');
 
 const ServiceOverview = (props) => {
+  // Overview state used to create service buttons
   const [overviewState, setOverviewState] = useState([]);
+
+  // Details state used to cause rerender on user selection.
   const [detailsSelected, setDetails] = useState();
+
+  // Contexts have data added to them following successful IPC return. Data is later used to create charts.
   const serviceComponents = useContext(OverviewContext);
   const healthdata = useContext(HealthInformationContext);
 
+  // Only happens when the component mounts.
   useEffect(() => {
     // IPC communication used to initiate query for information on microservices.
     ipcRenderer.send('overviewRequest', props.index);
 
     // IPC listener responsible for retrieving infomation from asynchronous main process message.
     ipcRenderer.on('overviewResponse', (event, data) => {
+      // Adds to state and context.
       setOverviewState(Object.values(JSON.parse(data)));
       serviceComponents.overviewData = JSON.parse(data);
     });
   }, []);
 
-  const renderState = () => {
+  // Filters data received from IPC to the communications database to create a list of the services tracked in the provided database,
+  const serviceList = () => {
+    // Holds the buttons generated for unique services.
     const componentButtons = [];
+
+    // Tracks which services already have button created.
     const serviceCache = {};
+
     for (let i = 0; i < overviewState.length; i += 1) {
       const element = overviewState[i];
-      // SQL
+      // If SQL
       if (element.currentmicroservice) {
         if (!(element.currentmicroservice in serviceCache)) {
           const button = (
@@ -36,12 +48,14 @@ const ServiceOverview = (props) => {
               type="button"
               key={`serviceItem${props.index}${i}`}
               onClick={() => {
+                // IPC communication used to initiate query for information on microservice health information.
                 ipcRenderer.send('detailsRequest', props.index);
 
                 // IPC listener responsible for retrieving infomation from asynchronous main process message.
                 ipcRenderer.on('detailsResponse', (event, data) => {
-                  // setHealthData(Object.values(JSON.parse(data)));
+                  // Adds returned data to context
                   healthdata.detailData = Object.values(JSON.parse(data));
+                  // Updates state. Triggers rerender.
                   setDetails(<ServiceDetails service={element.currentmicroservice} />);
                 });
               }}
@@ -50,12 +64,10 @@ const ServiceOverview = (props) => {
             </button>
           );
           componentButtons.push(button);
-          serviceCache[element.currentmicroservice] = 1;
-        } else {
-          serviceCache[element.currentmicroservice] += 1;
+          serviceCache[element.currentmicroservice] = true;
         }
       } else if (element.currentMicroservice) {
-        // Mongo
+        // If Mongo
         if (element.currentMicroservice) {
           if (!(element.currentMicroservice in serviceCache)) {
             const button = (
@@ -68,7 +80,9 @@ const ServiceOverview = (props) => {
 
                   // IPC listener responsible for retrieving infomation from asynchronous main process message.
                   ipcRenderer.on('detailsResponse', (event, data) => {
+                    // Adds returned data to context.
                     healthdata.detailData = Object.values(JSON.parse(data));
+                    // Updates state. Triggers rerender.
                     setDetails(<ServiceDetails service={element.currentMicroservice} />);
                   });
                 }}
@@ -77,9 +91,7 @@ const ServiceOverview = (props) => {
               </button>
             );
             componentButtons.push(button);
-            serviceCache[element.currentMicroservice] = 1;
-          } else {
-            serviceCache[element.currentMicroservice] += 1;
+            serviceCache[element.currentMicroservice] = true;
           }
         }
       }
@@ -95,7 +107,7 @@ const ServiceOverview = (props) => {
         <h1 className='overviewTitle'>Microservices Overview</h1>
       </div>
       <div />
-      <div className="servicesList">{renderState()}</div>
+      <div className="servicesList">{serviceList()}</div>
     </div>
   );
 };