added traffic chart

Author: Dialloousman

.DS_Store

@@ -0,0 +1,104 @@
+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>
+          <h1>THIS IS FROM MS TRAFFIC</h1>
+        <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/charts/microservice-traffic.jsx

@@ -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/route-trace.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
@@ -21,6 +22,7 @@ const Modal = (props) => {
     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/components/Modal.jsx

@@ -40,9 +40,33 @@ 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 };
+  
+  const routeButtonProperty = { traffic: {id: 'traffic', alt: 'Microservice Traffic', src: routeChart}, routes: {id: 'routes', alt: 'Route Trace', src: routeChart} };
+  
   const routes = [];
+  const traffic = [];
+  traffic.push (
+      <div>
+      <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.id}
+        </div>
+      </div>
+      </div>
+  );
   routes.push(
     <div>
       <div className="healthChartContainer">
@@ -53,10 +77,10 @@ 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'}}>
@@ -160,6 +184,7 @@ const ServiceOverview = (props) => {
         />
       ) : null}
       {routes}
+      {traffic}
     </div>
   );
 };

app/components/ServiceOverview.jsx

@@ -1 +1 @@
-{"setupRequired":true, "services":["hard","coded","in"]}
+{"setupRequired":false,"services":[["Ousman Microservice","SQL","\tpostgres://wcdnbpvl:[email protected]:5432/wcdnbpvl"],["MSlocation1 - Ousman","SQL","postgres://mnspuhgt:[email protected]:5432/mnspuhgt"]]}