Merge pull request #14 from Chronos2-0/jenae/ben/route_with_microservices

Jenae/ben/route with microservices

Author: robicano22

.DS_Store

@@ -1,34 +1,50 @@
 import React, { useContext } from 'react';
-import { Doughnut } from 'react-chartjs-2';
 import CommunicationsContext from '../context/OverviewContext';
 
 const RouteLocations = (props) => {
   const communicationsData = useContext(CommunicationsContext).overviewData;
 
-  console.log('THIS IS ROUTE TRACE: ', communicationsData);
-    
+  //initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.    
   const resObj = {};
-  for (let i = 0; i < communicationsData.length; i+=1) {
+
+  if(communicationsData.length>0 && communicationsData[0]["_id"]){
+    //Sort the communication array from latest to earliest document
+    communicationsData.sort((a,b)=>{ new Date(a.timeSent) - new Date(b.timeSent)})
+    
+    //Iterate over sorted communicationsData array from the end to the beginning
+    for (let i = communicationsData.length-1; i >= 0; i--) {
+      //declare a constant element and initialize it as the object at index i of the communicationsData array
+      const element = communicationsData[i];
+      //Pushes the microservice name into the object  
+      if (resObj[element.correlatingId]) {
+        resObj[element.correlatingId].push(element.currentMicroservice);
+      }
+      else resObj[element.correlatingId] = [element.currentMicroservice];
+      // initializing the object with the first microservice
+    }
+  }
+  else{
+  for (let i = communicationsData.length-1; i >= 0; i--) {
       const element = communicationsData[i];
       if (resObj[element.correlatingid]) resObj[element.correlatingid].push(element.currentmicroservice);
-      else {resObj[element.correlatingid] = [element.currentmicroservice]};
+      else resObj[element.correlatingid] = [element.currentmicroservice];
+      // initializing the object with the first microservice
   };
+}
 
   //use object values to destructure locations
   const tracePoints = Object.values(resObj);
-  console.log('THIS IS TRACEPOINTES: ', tracePoints[0]);
-
+  let position = tracePoints.length-1;
+ 
   const resArray = [];
-  for (let i = 0; i < tracePoints[0].length; i+=1) {
+  for (let i = 0; i < tracePoints[position].length; i+=1) {
     resArray.push(
         <div className="RouteCircle" key={i}>
-        <p id="routeText">Point {i+1}: {tracePoints[0][i]}</p>
+        <p id="routeText">Point {i+1}: {tracePoints[position][i]}</p>
         </div>
     )
   };
 
-
-//   console.log('ARRAY OF LOCATIONS: ', resObj);
   return (
       <div>
     {resArray}

app/assets/latencyChart.png

@@ -1,14 +1,11 @@
 import React, { useState } from 'react';
 import Modal from './Modal.jsx';
 import pieChart from '../assets/pieChart.png'
-import RequestTypesChart from '../charts/request-type-chart.jsx';
-import ResponseCodesChart from '../charts/response-code-chart.jsx';
-import RouteTrace from '../charts/route-trace.jsx';
-import SpeedChart from '../charts/speed-chart.jsx';
-import ProcessesChart from '../charts/processes-chart.jsx';
-import TemperatureChart from '../charts/temperature-chart.jsx'
-import LatencyChart from '../charts/latency-chart.jsx';
-import MemoryChart from '../charts/memory-chart.jsx';
+import memoryChart from '../assets/memoryChart.png'
+import tempChart from '../assets/tempChart.png'
+import speedChart from '../assets/speedChart.png'
+import latencyChart from '../assets/latencyChart.png'
+import processingChart from '../assets/processingChart.png'
 
 // Renders charts created with health and communication data for a selected database.
 const ServiceDetails = (props) => {
@@ -30,13 +27,13 @@ const ServiceDetails = (props) => {
 
   const buttonProperties = [
     { id: 'request', alt: 'Request Data', src: pieChart },
-    { id: 'response', alt: 'Response Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'routes', alt: 'Route Trace', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'speed', alt: 'Speed Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'processes', alt: 'Processes Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'latency', alt: 'Latency Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'temperature', alt: 'Temperature Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'memory', alt: 'Memory Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
+    { id: 'response', alt: 'Response Data', src: pieChart },
+   // { id: 'routes', alt: 'Route Trace', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
+    { id: 'speed', alt: 'Speed Data', src: speedChart},
+    { id: 'processes', alt: 'Processes Data', src: processingChart },
+    { id: 'latency', alt: 'Latency Data', src: latencyChart },
+    { id: 'temperature', alt: 'Temperature Data', src: tempChart },
+    { id: 'memory', alt: 'Memory Data', src: memoryChart },
   ];
 
   // Create the Health Info buttons and their associated properties.  Each time a button is clicked,

app/assets/memoryChart.png

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useContext } from 'react';
 import OverviewContext from '../context/OverviewContext';
 import HealthInformationContext from '../context/DetailsContext';
 import ServiceDetails from './ServiceDetails.jsx';
+import Modal from './Modal.jsx';
+import routeChart from '../assets/routeChart.png'
 
 const { ipcRenderer } = window.require('electron');
 
@@ -24,13 +26,46 @@ const ServiceOverview = (props) => {
     // IPC listener responsible for retrieving infomation from asynchronous main process message.
     ipcRenderer.on('overviewResponse', (event, data) => {
       // Adds to state and context.
-      console.log('THIS IS ARRAY IN OVERVIEWRESPONSE: ', Object.values(JSON.parse(data)));
       setOverviewState(Object.values(JSON.parse(data)));
-      // dialog.showMessageBox({shit:'Broke'});
       serviceComponents.overviewData = JSON.parse(data);
     });
   }, []);
 
+  //Add routes to the display 
+  // Hook used to toggle whether or not the Modal component renders
+  const [modalDisplay, toggleModalDisplay] = useState(false);
+  // Hook used to set the chart that the Modal displays.  The
+  // modalDisplay state is drilled into the Modal component.
+  const [modalChart, setModalChart] = useState();
+  // Hook used to set the Modal Component title. The "alt" attribute
+  // is grabbed from the onClick event via event.path[0].alt
+  const [chartTitle, setChartTitle] = useState();
+
+  const routeButtonProperty = { id: 'routes', alt: 'Route Trace', src: routeChart };
+  const routes = [];
+  routes.push(
+    <div>
+      <div className="healthChartContainer">
+        <input
+          onClick={() => {
+            setChartTitle(event.path[0].alt);
+            setModalChart(event.path[0].id);
+            toggleModalDisplay(!modalDisplay);
+          }}
+          type="image"
+          id={routeButtonProperty.id}
+          src={routeButtonProperty.src}
+          width="60px"
+          alt={routeButtonProperty.alt}
+        />
+        <br/>
+        <div style={{color:'white', paddingLeft:'7px'}}>
+        {routeButtonProperty.id}
+        </div>
+      </div>
+      </div>,
+    );
+
   // 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.
@@ -111,6 +146,20 @@ const ServiceOverview = (props) => {
       </div>
       <div />
       <div className="servicesList">{serviceList()}</div>
+      {/* adding the route tracer button */}
+      <h3>Trace Last Route</h3>
+      {modalDisplay ? (
+        <Modal
+          chartTitle={chartTitle}
+          modalChart={modalChart}
+          service=""
+          toggleModalDisplay={toggleModalDisplay}
+          onClick={() => {
+            toggleModalDisplay(!modalDisplay);
+          }}
+        />
+      ) : null}
+      {routes}
     </div>
   );
 };