Removed console.logs from debugging.

Author: mesherrera

Main.js

@@ -101,7 +101,6 @@ ipcMain.on('overviewRequest', (message, index) => {
         message.sender.send('overviewResponse', JSON.stringify(err));
       }
       const queryResults = JSON.stringify(data);
-      console.log(queryResults);
       // Asynchronous event emitter used to transmit query results back to the render process.
       message.sender.send('overviewResponse', queryResults);
     });
@@ -116,7 +115,6 @@ ipcMain.on('overviewRequest', (message, index) => {
         message.sender.send(JSON.stringify('Database info could not be retreived.'));
       }
       const queryResults = JSON.stringify(result.rows);
-      console.log(queryResults);
       // Asynchronous event emitter used to transmit query results back to the render process.
       message.sender.send('overviewResponse', queryResults);
     });
@@ -131,14 +129,12 @@ ipcMain.on('detailsRequest', (message, index) => {
 
   if (databaseType === 'MongoDB') {
     connectMongoose(index);
-    console.log(HealthInfoSchema)
     HealthInfoSchema.find({}, (err, data) => {
       if (err) {
-        console.log(`An error occured while querying the database: ${err}`);
         message.sender.send('detailsResponse', JSON.stringify(err));
       }
       const queryResults = JSON.stringify(data);
-      console.log(queryResults);
+      console.log('QUERY RESULTS =>', queryResults);
       // Asynchronous event emitter used to transmit query results back to the render process.
       message.sender.send('detailsResponse', queryResults);
     });
@@ -149,11 +145,9 @@ ipcMain.on('detailsRequest', (message, index) => {
     const getHealth = 'SELECT * FROM healthInfo';
     pool.query(getHealth, (err, result) => {
       if (err) {
-        console.log(err);
         message.sender.send('detailsResponse', JSON.stringify('Database info could not be retreived.'));
       }
       const queryResults = JSON.stringify(result.rows);
-      console.log(queryResults)
       // Asynchronous event emitter used to transmit query results back to the render process.
       message.sender.send('detailsResponse', queryResults);
     });

app/charts/memory-chart.jsx

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+// You can change the chart property imported to the one that suits your needs.
+import { Bar } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const MemoryChart = () => {
+  // ! Do not change the variables related to context.
+  const healthData = useContext(HealthContext);
+  const health = healthData.detailsData;
+
+  // Helper function
+  const createChart = () => {
+    // Object for storing data
+    const memoryObj = {
+      free: 0,
+      active: 0,
+      used: 0,
+      total: 0
+    };
+
+    // Iterate through HealthInfo to creat an object with data needed to create your graph.
+    for (let i = 0; i < health.length; i += 1) {
+      //Mongo
+      if (health[i].freeMemory) {
+        memoryObj.free += health[i].freeMemory
+        memoryObj.active += health[i].activeMemory
+        memoryObj.used += health[i].usedMemory
+        memoryObj.total += health[i].totalMemory
+      } else if (health[i].freememory) {
+        memoryObj.free += health[i].freememory;
+        memoryObj.active += health[i].activememory;
+        memoryObj.used += health[i].usedmemory;
+        memoryObj.total += health[i].totalmemory;
+      }
+    }
+    memoryObj.free /= 1000000000
+    memoryObj.active /= 1000000000
+    memoryObj.used /= 1000000000
+    memoryObj.total /= 100000000
+
+    // ! Chart Data 
+    // * --- Change the object used in data to the one you created.
+    // * --- Labels must be in the same order as the keys in your object. 
+    const chartData = {
+      datasets: [
+        {
+          label: 'Breakdown of Memory in Gigabytes',
+          data: Object.values(memoryObj),
+          backgroundColor: [
+            'rgb(2, 210, 249)',
+            'rgb(198, 42, 177)',
+            'rgb(252, 170, 52)',
+            'rgb(239, 91, 145)',
+            'rgb(182, 219, 26)',
+            'rgb(254, 255, 0)',
+          ],
+        },
+      ],
+      labels: ['Free Memory', 'Active Memory', 'Used Memory', 'Total Memory'],
+    };
+
+    return <Bar data={chartData} />;
+  };
+
+  // Return div with helper function invoked
+  return <div>{createChart()}</div>;
+};
+
+export default MemoryChart;