merged with dev, still debugging, need to switch to dev

Author: robicano22

.DS_Store

@@ -1,22 +1,110 @@
-# What is Chronos?
-A tool for visualizing communication and health throughout a microservices application
+![Chronos logo](https://raw.githubusercontent.com/Chronos2-0/Chronos/master/app/assets/logo2.png)
+## Chronos
+Microservice communication and health visualizer.
 
-## How can I use Chronos?
-1. Go to https://www.npmjs.com/package/chronos-microservice-debugger and follow the instructions to install the NPM package within each microservice of your application
-2. Download this repo
-3. Inside the downloaded directory, run `npm install` followed by `npm start`
+[![NPM Version][npm-image]][npm-url]
+[![NPM Downloads][downloads-image]][downloads-url]
+
+```js
+const cmd = require('chronos-microservice-debugger3')
+cmd.propagate()
+
+app.use('/', cmd.microCom('microserviceName', 'databaseType', 'databaseURL', 'wantMicroHealth', 'queryFrequency'))
+```
+
+## Features
+
+  * HTTP request tracing
+  * Speed and latency tracking
+  * Process monitoring
+  * Memory usage
+
+## Installation
+
+Chronos consists of a [Node](https://nodejs.org/en/) module available through the
+[npm registry](https://www.npmjs.com/) and a lightweight [Electron](https://electronjs.org/) desktop application.
+
+#### Node module
+
+To begin, install the [Chronos](https://www.npmjs.com/package/chronos-microservice-debugger3) node module within each microservice of your application using the
+[`npm install`](https://docs.npmjs.com/getting-started/installing-npm-packages-locally)command:
+
+```
+npm install chronos-microservice-debugger3
+```
+
+Once installed, write the following two lines at the top of each microservice's server file:
+```javascript
+const cmd = require('chronos-microservice-debugger3');
+cmd.propagate();
+```
+
+Then add a route handler for all incoming requests:
+```js
+app.use('/', cmd.microCom('microserviceName', 'databaseType', 'databaseURL', 'wantMicroHealth', 'queryFrequency'))
+```
+
+The cmd.microCom handler function logs communication and health data to a user-provided database. This is to ensure that your private data stays private. We currently support MongoDB and SQL/PostgreSQL databases.
+
+cmd.microCom takes four parameters and an optional fifth parameter. You can enter the arguments as individual strings or as an array.
+
+The parameters are:
+1. microserviceName: To identify the microservice (i.e. "payments")
+2. databaseType: Enter either "mongo" or "sql"
+3. databaseURL: Enter the URL of your database
+4. wantMicroHealth: Do you want to monitor the health of this microservice? Enter "yes" or "no"
+5. queryFrequency (optional): How frequently do you want to log the health of this microservice? It defaults to every minute, but you can choose:
+  * "s" : every second
+  * "m" : every minute (default)
+  * "h" : every hour
+  * "d" : once per day
+  * "w" : once per week
+
+String parameter example:
+```javascript
+app.use('/', cmd.microCom('payments', 'mongo', 'mongodb+srv://user:[email protected]/','yes','h'))
+```
+
+Array parameter example:
+```javascript
+let values = [
+  'payments',
+  'mongo',
+  'mongodb+srv://user:[email protected]/',
+  'yes',
+  'h'
+]
+
+app.use('/', cmd.microCom(values)
+```
+
+#### Electron desktop application
+
+After installing the node module in each microservice, download the Electron desktop application from the public [Chronos](https://github.com/Chronos2-0/Chronos) repo.
+
+Inside the downloaded directory, install all dependencies using the `npm install` command followed by the `npm start` command to start the Electron desktop application.
+
+## Contributing
 
-## How can I contribute to Chronos?
 Chronos hopes to inspire an active community of both users and developers. For questions, comments, or contributions, please submit a pull request.
 
-## Who created Chronos?
-* Mohtasim Chowdhury
-* Natalie Umanzor
-* Michelle Herrera
-* Duane McFarlane
-* Ben Mizel
-* Timothy Atapagra
-* Jenae Pennie
-* Chris Romano
-* Ousman Diallo
+## People
+
+[Tim Atapagra](https://github.com/orgs/Chronos2-0/people/timpagra),
+[Mohtasim Chowdhury](https://github.com/mohtasim317),
+[Ousman Diallo](https://github.com/orgs/Chronos2-0/people/Dialloousman),
+[Michelle Herrera](https://github.com/mesherrera),
+[Duane McFarlane](https://github.com/Duane11003),
+[Ben Mizel](https://github.com/orgs/Chronos2-0/people/ben-mizel),
+[Jenae Pennie](https://github.com/orgs/Chronos2-0/people/jenaepen),
+[Chris Romano](https://github.com/orgs/Chronos2-0/people/robicano22),
+[Natalie Umanzor](https://github.com/nmczormick)
+
+## License
+
+  [MIT](LICENSE)
 
+[npm-image]: https://img.shields.io/npm/v/chronos-microservice-debugger3.svg
+[npm-url]: https://www.npmjs.com/package/chronos-microservice-debugger3
+[downloads-image]: https://img.shields.io/npm/dm/chronos-microservice-debugger3.svg
+[downloads-url]: https://npmjs.org/package/chronos-microservice-debugger3

README.md

@@ -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,5 +1,6 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
 import CommunicationsContext from '../context/OverviewContext';
 
 const RouteLocations = (props) => {
@@ -10,14 +11,12 @@ 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) {
       // declare a constant element and initialize it as the object at index i of the communicationsData array
@@ -26,7 +25,6 @@ const RouteLocations = (props) => {
       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--) {
@@ -43,7 +41,9 @@ const RouteLocations = (props) => {
 
   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>
@@ -53,10 +53,12 @@ const RouteLocations = (props) => {
 
   console.log('resArray: ', resArray);
 
+
+  // return div with Trace Points data
   return (
-    <div id="routes">
-      {resArray}
-    </div>
+    <div>
+        {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
@@ -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/charts/route-trace.jsx

@@ -22,7 +22,6 @@ 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: 'app/assets/pieChart.png' },