merging dev branch into elena/updatingToDB feature branch. Merge branch 'dev' into elena/updatingToDB

Author: elenaatencio

app/App.tsx

@@ -5,6 +5,7 @@ import './stylesheets/scrollBar.scss';
 
 
 // this is the fitness gram pacer test
+// React memo helps with rendering optimization. The components within React memo will only be rerendered if prompt has changed
 const App: React.FC = React.memo(() => {
   return (
     <div>

app/components/Splash.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
+//Chronos logo when first starting the electron app. Has the picture for 4 seconds. 
 const Splash: React.FC = React.memo(props => {
   const [visible, setVisible] = useState(true);
 

app/containers/DashboardContainer.tsx

@@ -13,12 +13,22 @@ import AwsContextProvider from '../context/AwsContext';
 import '../stylesheets/Dashboard.scss';
 
 const DashboardContainer = React.memo(() => {
+
   const [visible, setVisible] = useState(false);
 
+  /**
+   * When DashBoard Container first mounted, visible is default to false, so that the Splash component can be stay visible.
+   * After 4 seconds, set the DashBoard Container visibility to true
+   */
   useEffect(() => {
     setTimeout(() => setVisible(true), 4000);
   }, []);
 
+  /**
+   * 1. Provide access to use ReactRouter
+   * 2. Provide access to serveral Context Providers (a.k.a Data Bank), including Application, Dashboard, Comms, Docker, Health, Event, Query, Aws
+   * 3. Child Component: SidebarContainer and MainContainer
+   */
   return (
     <>
       {visible && (

app/containers/GraphsContainer.tsx

@@ -156,7 +156,8 @@ const GraphsContainer: React.FC = React.memo(props => {
   };
 
   const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
-
+  console.log({GraphsContainer: selectedMetrics})
+  console.log({GraphsContainer: chart});
   return (
     <>
       <nav id="navigationBar">

app/containers/HealthContainer.tsx

@@ -51,8 +51,8 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
               const metric: string = Object.keys(serviceMetric)[0];
               const valueList = Object.values(serviceMetric)[0];
               const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
-              // console.log('valueList is', valueList); -> 50 values in an array
-              // console.log('newTimeList array is:', newTimeList); -> 50 values in an array
+              // console.log('valueList is', valueList); //-> 50 values in an array
+              // console.log('newTimeList array is:', newTimeList); //-> 50 values in an array
               if (selectedMetricsList.includes(metric)) {
                 const re = /_/g;
                 const newHealthChart = (

app/containers/SidebarContainer.tsx

@@ -11,10 +11,17 @@ import { ApplicationContext } from '../context/ApplicationContext';
 import { AwsContext } from '../context/AwsContext';
 
 const SidebarContainer = React.memo(props => {
-  const { intervalID } = useContext(ApplicationContext);
-  const { isLoading, setLoadingState } = useContext(AwsContext);
+  // Extract invervalID from ApplicationContext. Initival value: intervalID = null
+  const { intervalID } = useContext  (ApplicationContext);
+  // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
+  const { isLoading, setLoadingState } = useContext(AwsContext); 
 
   // clear interval and set loading state to true when leaving graph containers
+
+  /**
+   * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function. 
+   * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.   
+   */
   const handleClick = () => {
     if(intervalID) clearInterval(intervalID);
     if(!isLoading) setLoadingState(true);

app/context/ApplicationContext.tsx

@@ -24,8 +24,13 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
   const [savedMetrics, setSavedMetrics] = useState({});
   const [appIndex, setAppIndex] = useState<number>(0);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
-
-  function tryParseJSON(jsonString: any) {
+  
+  /**
+ * @function tryParseJson - a function that will parse the JSON data into an object. If there is any error during parsing (a.k.a there is a circular inside the JSON data), console log the error
+ * @param jsonString - JSON data that is received from backend
+ * @return an object with all information from backend
+ */
+  function tryParseJSON(jsonString: string) {
     try {
       const o = JSON.parse(jsonString);
 
@@ -38,6 +43,17 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     return false;
   }
 
+  /**
+   * @function fetchServicesNames - a function that will take an application name and update the state of `serviceData` based on backend response
+   * 1. Take in an application name
+   * 
+   * 2. Send a `servicesRequest` to backend
+   * 
+   * 3. Upon `servicesResponse`, parse the received JSON data and assign it to `servicesData`
+   * 
+   * 4. Remove the listener for `servicesResponse`
+   * @param application - application name
+   */  
   const fetchServicesNames = useCallback((application: string) => {
     console.log('app when fetch services name', application);
     // setApp(application);
@@ -46,6 +62,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
 
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       let result: any;
+      // Parse JSON data into object
       if (tryParseJSON(data)) result = JSON.parse(data);
       console.log('result from ipcrenderer services response is: ', result);
       setServicesData(result);
@@ -62,6 +79,10 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     });
   }, []);
 
+  /**
+   * @function getSavedMetrics - a function that will wait for backend `savedMetricsResponse` to update metrics using `setSavedMetrics`
+   * Trying to find what the data type needs to be. 
+   */
   const getSavedMetrics = useCallback(() => {
     ipcRenderer.send('savedMetricsRequest');
     ipcRenderer.on('savedMetricsResponse', (event: Electron.Event, data: any) => {

app/context/CommsContext.tsx

@@ -37,6 +37,12 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
     return false;
   }
 
+
+  /**
+   * @function fetchCommsData - uses useCallback Hook returns a memoized callback function.
+   * One reason to use useCallback is to prevent a component from re-rendering unless its props have changed.
+   * fetches the data
+   */
   const fetchCommsData = useCallback((app: string, live: boolean) => {
 
     if (app !== currentApp || live) {
@@ -47,6 +53,7 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
         let result: any;
         if (tryParseJSON(data)) result = JSON.parse(data);
         console.log('communication data from fetch request is: ', result);
+        console.log(data); 
         setCommsData(result);
       });
     }

app/context/EventContext.tsx

@@ -34,6 +34,14 @@ const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
     return false;
   }
 
+  /**
+   * @function fetchEventData - takes parameter arg. 
+   * Checks if arg is strictly equals to 'kafkametrics', if so removes the event listerner suing the ipcRenderer.removeAllListeners. 
+   * Sends a message using 'ipcRenderer.send'. 
+   * This function seems to be fetching event data and updating the state accordingly. 
+   * Problem: trying to change type any to something some concrete. 
+   */
+
   const fetchEventData = useCallback((arg: any) => {
     if (arg === 'kafkametrics') {
       ipcRenderer.removeAllListeners('kafkaResponse');
@@ -89,7 +97,9 @@ const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
   //     }
   //   });
   // }, []);
-
+/**
+ * @function transformEventData - seems like this function tranforms raw data into a format that can be visualize in graphs. 
+ */
   const transformEventData = (data: any[]) => {
     const dataList: any[] = [];
     const timeList: any[] = [];
@@ -119,7 +129,7 @@ const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
         });
       }
     });
-    return { eventDataList: dataList, eventTimeList: timeList };
+    return { eventDataList: dataList, eventTimeList: timeList }; 
   };
 
   return (
@@ -134,5 +144,4 @@ const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
     </EventContext.Provider>
   );
 });
-
 export default EventContextProvider;

app/context/HealthContext.tsx

@@ -34,10 +34,15 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
     return false;
   }
 
+
+  /**
+   * @function fetchEventData - sending a request to the backend to retrieve data. 
+   * Data is then parsed and the setHealthData is then set. 
+   */
   const fetchHealthData = useCallback(serv => {
     ipcRenderer.removeAllListeners('healthResponse');
 
-    let temp: any[] = [];
+    let temp: string[] = [];
     console.log('the cb being passed into fetch health data from graphscontainer is: ', serv);
 
     Promise.all(