Merge pull request #25 from Chronos2-0/newDevV2

New dev v2

Author: Dialloousman

.DS_Store

@@ -0,0 +1,103 @@
+import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
+import CommunicationsContext from '../context/OverviewContext';
+
+const MicroServiceTraffic = (props) => {
+  const communicationsData = useContext(CommunicationsContext).overviewData;
+
+  //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 = {};
+
+  if(communicationsData.length>0 && communicationsData[0]["_id"]){
+    //Sort the communication array from latest to earliest document
+    communicationsData.sort((a,b)=>{
+      if(new Date(a.timeSent) > new Date(b.timeSent)) return 1;
+      if(new Date(a.timeSent) < new Date(b.timeSent)) return -1;
+      return 0;
+    });
+    
+    //Iterate over sorted communicationsData array from the end to the beginning
+      for (let i = 0; i < communicationsData.length; i+=1) {
+      //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];
+    }
+  }
+
+  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];
+      // initializing the object with the first microservice
+    };
+  }
+
+  //use object values to destructure locations
+  const tracePoints = Object.values(resObj);
+  let position = communicationsData[0].correlatingid ? 0 : tracePoints.length-1;
+ 
+  // Declare Micro-server-count dictinary to capture the amount of times a particular server is hit
+  const microServiceCountdictionary  = {};
+
+  // iterate over Trace Points
+  for (let i = 0; i < tracePoints[position].length; i+=1) {
+    
+    // populate Micro-count dictionary
+    if (!microServiceCountdictionary[tracePoints[position][i]]) {
+      microServiceCountdictionary[tracePoints[position][i]] = 1;
+    } else {
+      microServiceCountdictionary[tracePoints[position][i]]+=1
+    }
+  };
+
+  // capture values of microServiceCountdictionary to use as data to populate chart object
+  const serverPingCount = Object.values(microServiceCountdictionary);
+
+  
+  // Create chart object data to feed into bar component 
+  const myChart = {
+    //spread dictionary keys inorder to properly label chart x axis 
+    labels: [...Object.keys(microServiceCountdictionary)],
+    datasets: [
+        {
+          label: 'Times server Pinged',
+          backgroundColor: 'rgba(241, 207, 70,1)',
+          borderColor: 'rgba(0,0,0,1)',
+          borderWidth: 1,
+          data: [...serverPingCount, 0] // spread ping count array into data array to have chart populate the Y axis
+        }
+      ]
+  }
+
+  
+  // return div with Bar component and Trace Points data
+  return (
+      <div>
+        <Bar 
+        data={myChart}
+        width={100}
+        height={50}
+        options={{
+            title:{
+              display:true,
+              text:'Microservices Overview',
+              fontSize:20
+            },
+            legend:{
+              display:true,
+              position:'right'
+            }
+          }}
+        />
+      </div>
+  )
+};
+
+export default MicroServiceTraffic;
+

app/assets/chartModal.png

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
 import CommunicationsContext from '../context/OverviewContext';
 
 const RouteLocations = (props) => {
@@ -9,14 +10,11 @@ const RouteLocations = (props) => {
 
   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)})
     communicationsData.sort((a,b)=>{
       if(new Date(a.timeSent) > new Date(b.timeSent)) return 1;
       if(new Date(a.timeSent) < new Date(b.timeSent)) return -1;
       return 0;
     });
-
-
 
     //Iterate over sorted communicationsData array from the end to the beginning
       for (let i = 0; i < communicationsData.length; i+=1) {
@@ -27,35 +25,40 @@ const RouteLocations = (props) => {
         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--) {
+
+  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];
       // initializing the object with the first microservice
-  };
-}
+    };
+  }
 
   //use object values to destructure locations
   const tracePoints = Object.values(resObj);
   let position = communicationsData[0].correlatingid ? 0 : tracePoints.length-1;
 
   const resArray = [];
 
+  // iterate over Trace Points
   for (let i = 0; i < tracePoints[position].length; i+=1) {
+    //push into resulting array current tracepoint as div
     resArray.push(
         <div className="RouteCircle" key={i}>
         <p id="routeText">Point {i+1}: {tracePoints[position][i]}</p>
         </div>
     )
   };
 
+  
+  // return div with Trace Points data
   return (
       <div>
-    {resArray}
+        {resArray}
       </div>
   )
 };

app/charts/microservice-traffic.jsx

@@ -7,6 +7,7 @@ import TemperatureChart from '../charts/temperature-chart.jsx';
 import LatencyChart from '../charts/latency-chart.jsx';
 import MemoryChart from '../charts/memory-chart.jsx';
 import RouteTrace from '../charts/route-trace.jsx';
+import MicroServiceTraffic from '../charts/microservice-traffic.jsx';
 
 const Modal = (props) => {
   // Destructuring props to make linter happy
@@ -16,11 +17,12 @@ const Modal = (props) => {
   //  Dictionary used to render proper data chart within Modal component upon rendering
   const dict = {
     request: <RequestTypesChart service={service} />,
-    routes: <RouteTrace service={service} />,
+    Routes: <RouteTrace service={service} />,
     response: <ResponseCodesChart service={service} />,
     speed: <SpeedChart service={service} />,
     processes: <ProcessesChart service={service} />,
     latency: <LatencyChart service={service} />,
+    Traffic: <MicroServiceTraffic service={service} />,
     temperature: <TemperatureChart service={service} />,
     memory: <MemoryChart service={service} />,
   };

app/charts/route-trace.jsx

@@ -23,12 +23,10 @@ const ServiceDetails = (props) => {
   const { currentMicroservice } = props;
 
   // Dictionary used by the healthInfoButtons loop below
-  //    { id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
 
   const buttonProperties = [
     { id: 'request', alt: 'Request Data', src: pieChart },
     { 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 },

app/components/Modal.jsx

@@ -4,6 +4,7 @@ import HealthInformationContext from '../context/DetailsContext';
 import ServiceDetails from './ServiceDetails.jsx';
 import Modal from './Modal.jsx';
 import routeChart from '../assets/routeChart.png'
+import chartModal from '../assets/chartModal.png'
 
 const { ipcRenderer } = window.require('electron');
 
@@ -40,11 +41,42 @@ const ServiceOverview = (props) => {
   // 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 };
+  
+  //route button AND traffic button property
+  const routeButtonProperty = { traffic: {id: 'Traffic', alt: 'Microservice Traffic', src: chartModal}, routes: {id: 'Routes', alt: 'Route Trace', src: routeChart} };
+  
+  //declare routes array to display routes when modal is toggled
   const routes = [];
+  //declare traffic array to display traffic when modal is toggled
+  const traffic = [];
+
+  //push traffic component logic traffic 
+  traffic.push (
+    
+      <div className="healthChartContainer">
+        <input
+          onClick={() => {
+            setChartTitle(event.path[0].alt);
+            setModalChart(event.path[0].id);
+            toggleModalDisplay(!modalDisplay);
+          }}
+          type="image"
+          id={routeButtonProperty.traffic.id}
+          src={routeButtonProperty.traffic.src}
+          width="60px"
+          alt={routeButtonProperty.traffic.alt}
+        />
+        <br/>
+        <div style={{color:'white', paddingLeft:'7px'}}>
+        {routeButtonProperty.traffic.id}
+        </div>
+      </div>
+    
+  );
+
+  //push routes component logic traffic 
   routes.push(
-    <div>
+
       <div className="healthChartContainer">
         <input
           onClick={() => {
@@ -53,17 +85,17 @@ const ServiceOverview = (props) => {
             toggleModalDisplay(!modalDisplay);
           }}
           type="image"
-          id={routeButtonProperty.id}
-          src={routeButtonProperty.src}
+          id={routeButtonProperty.routes.id}
+          src={routeButtonProperty.routes.src}
           width="60px"
-          alt={routeButtonProperty.alt}
+          alt={routeButtonProperty.routes.alt}
         />
         <br/>
         <div style={{color:'white', paddingLeft:'7px'}}>
-        {routeButtonProperty.id}
+        {routeButtonProperty.routes.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,
@@ -144,10 +176,9 @@ const ServiceOverview = (props) => {
       <div>
         <h1 className='overviewTitle'>Microservices Overview</h1>
       </div>
-      <div />
       <div className="servicesList">{serviceList()}</div>
-      {/* adding the route tracer button */}
-      <h3>Trace Last Route</h3>
+      <br/>
+      <h1>Microservices Communications</h1>
       {modalDisplay ? (
         <Modal
           chartTitle={chartTitle}
@@ -159,7 +190,10 @@ const ServiceOverview = (props) => {
           }}
         />
       ) : null}
-      {routes}
+      <div id="routeAndTrafficDisplay">
+        {routes}
+        {traffic}
+      </div>
     </div>
   );
 };

app/components/ServiceDetails.jsx

@@ -258,6 +258,11 @@ select {
   opacity: 0.7;
   }
 
+  #routeAndTrafficDisplay {
+    display: inline-flex;
+  }
+
+
 #microserviceHealthInfo {
   text-align: center;
   margin-top: 25px;
@@ -310,6 +315,7 @@ select {
   margin-right: 10px;
 }
 
+
 .RouteCircle {
   font-family: Arial, Helvetica, sans-serif;
   color: white;

app/components/ServiceOverview.jsx

@@ -1 +1 @@
-{"setupRequired":true,"services":["hard","coded","in"]}
+{"setupRequired":true,"services":["hard","coded","in"]}