Merge pull request #32 from oslabs-beta/health-context-refactor

Health context refactor

Author: tedpham3

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Card, CardHeader, IconButton, CardContent, Typography } from '@mui/material';
+
+import React from "react";
+import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import UpdateIcon from '@mui/icons-material/Update';
 import './styles.scss';
@@ -12,8 +13,11 @@ interface ApplicationCardProps {
   classes: any;
 }
 
-const ApplicationsCard: React.FC<ApplicationCardProps> = (props: ApplicationCardProps) => {
-  const { application, i, setModal, classes } = props;
+import './styles.scss'
+
+const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
+
+  const { application, i, setModal, classes } = props
   const { handleClick, confirmDelete } = getEventHandlers({ application, setModal });
 
   return (

app/components/GraphNavBar/GraphNavBar.tsx

@@ -4,7 +4,6 @@ import { ApplicationContext } from '../../context/ApplicationContext'
 import { QueryContext } from '../../context/QueryContext'
 import { CommsContext } from '../../context/CommsContext'
 import { HealthContext } from '../../context/HealthContext'
-import { Link } from 'react-router-dom';
 
 const GraphNavBar = (props) => {
 
@@ -50,7 +49,6 @@ const GraphNavBar = (props) => {
         );
       });
     }
-
     return buttonList;
   };
 

app/components/TransferColumns.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
+import { ApplicationContext } from '../context/ApplicationContext';
 import { useParams } from 'react-router-dom';
 import { QueryContext } from '../context/QueryContext';
 import { HealthContext } from '../context/HealthContext';
@@ -17,7 +18,9 @@ interface Params {
 
 const TransferColumns = React.memo(() => {
   const [targetKeys, setTargetKeys] = useState<any[]>([]);
+  // console.log({targetKeys})
   const [metricsPool, setMetricsPool] = useState<any[]>([]);
+  // console.log({metricsPool})
   const [healthMetricsReady, setHealthMetricsReady] = useState(false);
   const [healthMetrics, setHealthMetrics] = useState<any[]>([]);
   const [eventMetricsReady, setEventMetricsReady] = useState(false);
@@ -31,11 +34,14 @@ const TransferColumns = React.memo(() => {
   const { mode } = useContext(DashboardContext.DashboardContext);
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  const { savedMetrics } = useContext(ApplicationContext)
+
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
   const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
 
   useEffect(() => {
     if (healthData) {
+      console.log({healthData})
       setHealthMetricsReady(true);
     }
   }, [healthData]);
@@ -103,7 +109,7 @@ const TransferColumns = React.memo(() => {
         }
       }
     } else {
-      // iterate throught the healthData object to populate the `Metrics Query` tab with metrics options
+      // iterate throughout the healthData object to populate the `Metrics Query` tab with metrics options
       // The pool array wants an object with a specific format in order to populate the selection table
       for (const service in dataObject) {
         const categoryObjects = dataObject[service];
@@ -124,9 +130,10 @@ const TransferColumns = React.memo(() => {
   };
 
   const createSelectedMetricsList = () => {
+
     const temp: any[] = [];
     const categorySet = new Set();
-    // console.log('Inside TransferColumns.txs line 124 targetKeys: ', targetKeys)
+
     for (let i = 0; i < targetKeys.length; i++) {
       const str: string = targetKeys[i];
       const strArr: string[] = str.split(' | ');
@@ -170,21 +177,31 @@ const TransferColumns = React.memo(() => {
   ];
 
   // makes the rows needed for the selection grid
-  const rows: any[] = [];
-  metricsPool.forEach((el, index) => {
-    const row = {
-      id: index,
-      tag: el.tag,
-      title: el.title.split(' | ')[1].replace(/.*\/.*\//g, ''),
-    }; // gets rid of the full path
-    rows.push(row);
-  });
+  const rows:any[] = []
+  let id = 0
+  for(let savedMetric of Object.keys(savedMetrics)) {
+   
+    const { metric,category } = savedMetrics[savedMetric]
+    rows.push({
+      id:id++,
+      tag:category,
+      title:metric
+    })
+  }
 
   // makes the Printed list of 'currently selected rows' on the page using targetKeys array
   const selectedRows: any[] = [];
   targetKeys.forEach(el => {
     selectedRows.push(
-      <li style={{ marginLeft: '30px', marginTop: '5px', color: currentMode.color }}>{el}</li>
+      <li 
+        style={{ 
+          marginLeft: '30px', 
+          marginTop: '5px', 
+          color: currentMode.color 
+          }}
+      >
+        {el}
+      </li>
     );
   });
 
@@ -222,7 +239,8 @@ const TransferColumns = React.memo(() => {
             onRowSelectionModelChange={metricIndeces => {
               const metrics: any[] = [];
               metricIndeces.forEach(el => {
-                metrics.push(metricsPool[el].key);
+                console.log({rows})
+                metrics.push(`${rows[el].tag} | ${rows[el].title}`);
               });
               setTargetKeys(metrics);
             }}
@@ -231,10 +249,20 @@ const TransferColumns = React.memo(() => {
 
         </div>
         {selectedRows.length > 0 && (
-          <h3 style={{ marginTop: '20px', color: 'currentStyle',}}
-          >Selected Rows:</h3>
+          <h3 
+            style={{ 
+              marginTop: '20px', 
+              color: 'currentStyle'
+            }}
+          >
+            Selected Rows:
+          </h3>
         )}
-        <ol id="selectedRows">{selectedRows}</ol>
+        <ol 
+          id="selectedRows"
+        >
+            {selectedRows}
+        </ol>
       </div>
     </>
   );

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -102,7 +102,12 @@ const GraphsContainer: React.FC = React.memo(() => {
         inspect={inspect}
         setInspect={setInspect}
       />
-      <Header app={app} service={service} live={live} setLive={setLive} />
+      <Header 
+        app={app} 
+        service={service} 
+        live={live} 
+        setLive={setLive} 
+      />
 
       {inspect && <Inspect />}
 
@@ -115,11 +120,16 @@ const GraphsContainer: React.FC = React.memo(() => {
             <RouteChart />
             <LogsTable />
           </div>
-        ) : (
-          <div className="graphs" style= {currentStyle}>
+        ) : 
+        (
+          <div className="graphs">
             {chart === 'all' && (
               <div className="transferColumns">
-                <h2 style={currentMode}>Search Your Metrics to Display</h2>
+                <h2 
+                  style={currentMode}
+                >
+                  Search Your Metrics to Display
+                </h2>
                 <TransferColumns />
               </div>
             )}

app/containers/SidebarContainer/SidebarContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link } from 'react-router-dom';
+import { Link,useNavigate } from 'react-router-dom';
 
 import ListIcon from '@mui/icons-material/List';
 import InfoIcon from '@mui/icons-material/Info';
@@ -12,6 +12,7 @@ import './styles.scss';
 import { ApplicationContext } from '../../context/ApplicationContext';
 import { AwsContext } from '../../context/AwsContext';
 import { DashboardContext } from '../../context/DashboardContext';
+import { QueryContext } from '../../context/QueryContext';
 
 const SidebarContainer = React.memo(() => {
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
@@ -20,6 +21,9 @@ const SidebarContainer = React.memo(() => {
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
   const { addApp,setApplications,deleteApp } = useContext(DashboardContext)
+  const { setSelectedMetrics } = useContext(QueryContext)
+
+  const navigate = useNavigate();
 
   /**
    * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function.
@@ -41,13 +45,6 @@ const SidebarContainer = React.memo(() => {
         URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
         name: 'Microservices-Mongo',
         description: 'Mongo Microservices Example'
-      },
-      microServicesSQLFields: {
-        typeOfService: 'Microservices',
-        database: 'SQL',
-        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
-        name: 'Microservices-SQL',
-        description: 'SQL Microservices Example'
       }
       ,
       dockerMongoData: {
@@ -56,27 +53,22 @@ const SidebarContainer = React.memo(() => {
         URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
         name: 'Docker-Mongo',
         description: 'Docker Example'
-      },
-      dockerSQLData: {
-        typeOfService: 'Docker',
-        database: 'SQL',
-        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
-        name: 'Docker-SQL',
-        description: 'Docker Example'
       }
     }
 
     addApp(examplesData)
   }
 
   const handleExitExample = () => {
+
     setExample(false)
-    // setApplications([])
     setAppIndex(0);
     setApp('');
     setServicesData([]);
-    setChart('communications')
+    setChart('all')
     deleteApp(0,'all')
+    setSelectedMetrics([])
+    navigate("/")
   }
 
   return (

app/context/DashboardContext.tsx

@@ -47,7 +47,6 @@ const DashboardContextProvider = React.memo((props: any) => {
 
   const [user, setUser] = useState<string>('guest');
   const [applications, setApplications] = useState<string[][]>([]);
-  console.log({applications})
   const [mode, setMode] = useState<string>('light');
 
   const getApplications = useCallback(() => {

app/context/HealthContext.tsx

@@ -34,6 +34,7 @@ interface HealthDataObject {
 const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
   const [healthData, setHealthData] = useState<any>({ healthDataList: [], healthTimeList: [] });
   const [services, setServices] = useState<Array<string>>([]);
+  console.log({services})
 
   function tryParseJSON(jsonString: any) {
     try {
@@ -55,58 +56,41 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
    */
 
   const fetchHealthData = useCallback(async servers => {
-    ipcRenderer.removeAllListeners('healthResponse');
 
     let temp: HealthDataObject[] = [];
-    await Promise.all(servers.map( async (service: string) => {
-      //NOT WORKING HERE
-      try {
-        const newPromise: any = await new Promise((resolve, reject) => {
-          ipcRenderer.send('healthRequest', `${service}`);
-          ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
-            let result: object[];
-            // console.log({data})
-            if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
-              result = JSON.parse(data);
-              // console.log({result})
-              // console.log('HealthContext.tsx line 68 result: ', result, 'service', service, 'Obj key', Object.keys(result[0])[0]);
-              //result exists, has a length prop, and the service name and database name are same
-              if (result && result.length && `${service}` === Object.keys(result[0])[0]) {
-                resolve(result[0]);
-              }
-            }
-          });
-        })
-        temp.push(newPromise);
-        // console.log('HealthContext.tsx line 80 temp populates?: ', temp, serv)
-        if (checkServicesComplete(temp, [`${service}`])) {
+    servers.map( async (service: string) => {
+      
+    try {
+
+      ipcRenderer.removeAllListeners('healthResponse');
+      ipcRenderer.send('healthRequest', `${service}`);
+      ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
+        
+        const response = JSON.parse(data);
+        temp.push(response[0]);
+
+        if(temp.length === servers.length) {
+          console.log(temp.length,servers.length)
           setServices([`${service}`]);
           let transformedData: any = {};
-          // console.log('original healthData before transformation: ', temp);
-          // transformedData = {
-          //   healthDataList: [1,2,3,4,5],
-          //   healthTimeList: [1,2,3,4,5]
-          // } //testing typescript, transformedDATA of type 2 arrays with basic entries?
+          console.log({temp})
           transformedData = healthTransformer(temp); //must match the setHealthData STATE format
-          // console.log('healthData after tranformation: ', transformedData);
           setHealthData(transformedData);
         }
-        } catch (err) {
-        // console.log("healthcontext.tsx ERROR: ", err);
-      };
-    }
-    ))
-    } , []);
+      });
+    } catch (err) {
+    console.log("healthcontext.tsx ERROR: ", err);
+  }})} , []);
 
   const checkServicesComplete = (temp: any[], servers: string[]) => {
     if (temp.length !== servers.length) {
       return false;
     }
     const arr1: string[] = [];
     for (let i = 0; i < temp.length; i++) {
-      arr1.push(Object.keys(temp[i])[0]);
+      const [ serviceName ] = Object.keys(temp[i])
+      arr1.push(serviceName);
     }
-    // console.log('in checkServicesComplete line 139: ', arr1);
     return arr1.sort().toString() === servers.sort().toString();
   };
 

app/context/helpers.ts

@@ -38,12 +38,14 @@ interface HealthDataObject {
 
 export function healthTransformer(healthData: HealthDataObject[]) {
   // make an object for storing different services' metrics data
+  console.log({healthData})
   const serviceMetricsObject = {};
   // loop through the services in the healthData array
   healthData.forEach(serviceObj => {
     // grab the key string from the current service object
     const serviceName = Object.keys(serviceObj)[0];
     const serviceElements = serviceObj[serviceName];
+    console.log(serviceObj)
     // console.log('serviceElements: ', serviceElements);
     // add the serviceName as a key on the serviceMetricsObject and assign it an empty object
     serviceMetricsObject[serviceName] = {};