Dev

Main.js

@@ -59,7 +59,7 @@ ipcMain.on('submit', (message, newService) => {
       encoding: 'UTF-8',
     }),
   );
-  // if statement is used to remove hard coded data.
+  // if statement is used to replace hard coded data. Hard coded data and the michelleWasHere key is needed to avoid a load error caused by Electron querying the database before a user has added or selected a database.
   if (state.michelleWasHere) {
     state.setupRequired = false;
     state.michelleWasHere = false;
@@ -134,7 +134,6 @@ ipcMain.on('detailsRequest', (message, index) => {
         message.sender.send('detailsResponse', JSON.stringify(err));
       }
       const queryResults = JSON.stringify(data);
-      console.log('QUERY RESULTS =>', queryResults);
       // Asynchronous event emitter used to transmit query results back to the render process.
       message.sender.send('detailsResponse', queryResults);
     });

app/charts/latency-chart.jsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { Line } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const LatencyChart = (props) => {
+  const xAxis = [];
+  const yAxis = [];
+  const healthData = useContext(HealthContext).detailData;
+  for (let i = 0; i < healthData.length; i++) {
+    const element = healthData[i];
+    if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
+      xAxis.push(i);
+      yAxis.push(element.latency);
+    }
+  }
+  const chartData = {
+    datasets: [
+      {
+        label: `CPU latency of ${props.service}`,
+        data: yAxis,
+        backgroundColor: ['rgb(254, 255, 0)'],
+      },
+    ],
+    options: {
+      xAxisID: 'TBD',
+      yAxisID: 'TBD',
+    },
+    labels: xAxis,
+  };
+  return (
+    <div>
+      <Line data={chartData} />
+    </div>
+  );
+};
+
+export default LatencyChart;

app/charts/memory-chart.jsx

@@ -1,79 +1,69 @@
 import React, { useContext } from 'react';
-import { Line } from 'react-chartjs-2';
+import { Bar } from 'react-chartjs-2';
 import HealthContext from '../context/DetailsContext';
 
-const MemoryChart = () => {
-  const healthData = useContext(HealthContext);
-  // const health = healthData.detailData;
+const MemoryChart = (props) => {
+  const healthData = useContext(HealthContext).detailData;
 
   const createChart = () => {
-    let free = [];
-    let used= [];
-    let active = [];
-    let total = [];
+    const xAxis = [];
+    const free = [];
+    const used = [];
+    const active = [];
+    const total = [];
 
     for (let i = 0; i < healthData.length; i += 1) {
+      xAxis.push(i);
       // If Mongo
-      if (healthData[i].freeMemory && healthData[i].activeMemory && healthData[i].usedMemory && healthData[i].totalMemory) {
+      if (healthData[i].currentMicroservice === props.service) {
         free.push(healthData[i].freeMemory);
         active.push(healthData[i].activeMemory);
         used.push(healthData[i].usedMemory);
         total.push(healthData[i].totalMemory);
-      } else {
+      }
+
+      // If SQL
+      if (healthData[i].currentmicroservice === props.service) {
         free.push(healthData[i].freememory);
         active.push(healthData[i].activememory);
         used.push(healthData[i].usedmemory);
         total.push(healthData[i].totalmemory);
       }
     }
 
-
-
-    const memoryObj = {
-      freeMem: free,
-      usedMem: used,
-      activeMem: active,
-      totalMem: total
-    }
-
     const chartData = {
       datasets: [
         {
-          label: "Free Memory",
-          data: Object.values(memoryObj.freeMem),
-          backgroundColor: [
-            "rgb(2, 210, 249)"
-          ]
+          label: 'Free Memory',
+          backgroundColor: 'rgb(2, 210, 249)',
+          data: free,
+          // showLine: true,
         },
         {
-          label: "Used Memory",
-          data: Object.values(memoryObj.usedMem),
-          backgroundColor: [
-            "rgb(198, 42, 177)",
-          ]
+          label: 'Used Memory',
+          backgroundColor: 'rgb(239, 91, 145)',
+          data: used,
+          // showLine: true,
         },
         {
-          label: "Active Memory",
-          data: Object.values(memoryObj.activeMem),
-          backgroundColor: [
-            "rgb(252, 170, 52)"
-          ]
+          label: 'Active Memory',
+          backgroundColor: 'rgb(182, 219, 26)',
+          data: active,
+          // showLine: true,
         },
         {
-          label: "Total Memory",
-          data: Object.values(memoryObj.activeMem),
-          backgroundColor: [
-            "rgb(239, 91, 145)"
-          ]
+          label: 'Total Memory',
+          backgroundColor: 'rgb(252, 170, 52)',
+          data: total,
+          // showLine: true,
         },
       ],
-      labels: ["Free Memory", "Active Memory", "Used Memory", "Total Memory"]
+      labels: xAxis,
     };
 
-    return <Line data={chartData} />;
+    return <Bar data={chartData} />;
   };
 
-  // Return div with helper function invoked
   return <div>{createChart()}</div>;
 };
 

app/charts/processes-chart.jsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const ProcessesChart = (props) => {
+  const healthData = useContext(HealthContext).detailData;
+  const createChart = () => {
+    const communicationLabel = [];
+    const totalProcesses = [];
+    const runningProcesses = [];
+    const blockedProcesses = [];
+    const sleepingProcesses = [];
+
+    for (let i = 0; i < healthData.length; i += 1) {
+      const element = healthData[i];
+      // If using a SQL Database
+      if (element.currentmicroservice === props.service) {
+        communicationLabel.push(i);
+        totalProcesses.push(element.totalnumprocesses);
+        runningProcesses.push(element.numrunningprocesses);
+        blockedProcesses.push(element.numblockedprocesses);
+        sleepingProcesses.push(element.numsleepingprocesses);
+      }
+      // If using a Mongo Database
+      if (element.currentMicroservice === props.service && element.cpuCurrentSpeed) {
+        communicationLabel.push(i);
+        totalProcesses.push(element.numTotalProcesses);
+        runningProcesses.push(element.numRunningProcesses);
+        blockedProcesses.push(element.numBlockedProcesses);
+        sleepingProcesses.push(element.numSleepingProcesses);
+      }
+    }
+
+    const chartData = {
+      datasets: [{
+        label: 'Blocked Processes',
+        backgroundColor: 'rgb(198, 42, 177)',
+        data: blockedProcesses,
+      }, {
+        label: 'Sleeping Processes',
+        backgroundColor: 'rgb(252, 170, 52)',
+        data: sleepingProcesses,
+      }, {
+        label: 'Running Processes',
+        backgroundColor: 'rgb(239, 91, 145)',
+        data: runningProcesses,
+      }, {
+        label: 'Total Processes',
+        backgroundColor: 'rgb(182, 219, 26)',
+        data: totalProcesses,
+      }],
+      labels: communicationLabel,
+    };
+
+    return <Bar data={chartData} />;
+  };
+
+  return <div>{createChart()}</div>;
+};
+
+export default ProcessesChart;

app/charts/request-type-chart.jsx

@@ -2,9 +2,8 @@ import React, { useContext } from 'react';
 import { Doughnut } from 'react-chartjs-2';
 import CommunicationsContext from '../context/OverviewContext';
 
-const RequestTypesChart = () => {
-  const communicationsData = useContext(CommunicationsContext);
-  const communications = communicationsData.overviewData;
+const RequestTypesChart = (props) => {
+  const communicationsData = useContext(CommunicationsContext).overviewData;
 
   const createRequestChart = () => {
     const requestObj = {
@@ -16,18 +15,17 @@ const RequestTypesChart = () => {
       PUT: 0,
     };
 
-    for (let i = 0; i < communications.length; i += 1) {
-      const element = communications[i];
+    for (let i = 0; i < communicationsData.length; i += 1) {
+      const element = communicationsData[i];
       // if Mongo
-      if (element.reqType in requestObj) requestObj[element.reqType] += 1;
+      if (element.currentMicroservice === props.service && element.reqType in requestObj) requestObj[element.reqType] += 1;
       // if SQL
-      else if (element.reqtype in requestObj) requestObj[element.reqtype] += 1;
+      else if (element.currentmicroservice === props.service && element.reqtype in requestObj) requestObj[element.reqtype] += 1;
     }
 
     const chartData = {
       datasets: [
         {
-          label: 'Breakdown of Requests by Type',
           data: Object.values(requestObj),
           backgroundColor: [
             'rgb(2, 210, 249)',