Merge pull request #9 from Chronos2-0/jenae/valid_uri

updated the chronos frontend glitch and removed MichelleWasHere

Author: ben-mizel

Main.js

@@ -6,6 +6,8 @@ const connectMongoose = require('./model/mongoose-connect');
 const CommunicationSchema = require('./model/mongoose-communicatonSchema');
 const HealthInfoSchema = require('./model/mongoose-healthInfoSchema');
 
+//declare a variable pool for SQL connection
+let pool;
 let win;
 function createWindow() {
   win = new BrowserWindow({
@@ -54,20 +56,26 @@ ipcMain.on('setup', (message) => {
 
 // Loads existing settings JSON and update settings to include new services entered by the user.
 ipcMain.on('submit', (message, newService) => {
+  // set the variable 'state' to the contents of /user/settings.json
+  // contents => "setupRequired" (boolean),"services" (Array)
+  // setupRequired- toggle the page for adding database
+  // services - name of DB  stores dbType, and uri 
   const state = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
       encoding: 'UTF-8',
     }),
   );
-  // 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) {
+  // if statement is used to replace hard coded data. Hard coded data is needed to avoid a load error caused by Electron querying the database before a user has added or selected a database.
+  if (state.setupRequired) {
     state.setupRequired = false;
-    state.michelleWasHere = false;
     state.services = [JSON.parse(newService)];
+    //is updating the /user/settings.json file with the first new service
     fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
   } else {
+    //what is the new service?
     state.setupRequired = false;
     state.services.push(JSON.parse(newService));
+    //is updating the /user/settings.json file with the new service
     fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
   }
 });
@@ -79,44 +87,53 @@ ipcMain.on('dashboard', (message) => {
       encoding: 'UTF-8',
     }),
   );
+  //getting the array of databases [name, dbType, uri]
   const { services } = state;
+  //creates an array of the database names
   const dashboardList = services.reduce((acc, curVal) => {
     acc.push(curVal[0]);
     return acc;
   }, []);
+  //returns the array of the database names
   message.returnValue = dashboardList;
 });
 
 // Queries the database for communications information and returns it back to the render process.
 ipcMain.on('overviewRequest', (message, index) => {
-  const databaseType = JSON.parse(
+  //acquires the services from user settings.json file
+  const services = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
-  ).services[index][1];
+  ).services
+  const databaseType = services[index][1];
+  const URI = services[index][2];
 
   if (databaseType === 'MongoDB') {
-    connectMongoose(index);
+    connectMongoose(index,URI);
     CommunicationSchema.find({}, (err, data) => {
       if (err) {
         console.log(`An error occured while querying the database: ${err}`);
-        message.sender.send('overviewResponse', JSON.stringify(err));
+        return message.sender.send('overviewResponse', JSON.stringify(err));
       }
+      //queryResults is an array of objects with the following keys {"_id","currentMicroservice","targetedEndpoint","reqType","timeSent","resStatus","resMessage","__v"}
       const queryResults = JSON.stringify(data);
+
       // Asynchronous event emitter used to transmit query results back to the render process.
-      message.sender.send('overviewResponse', queryResults);
+      return message.sender.send('overviewResponse', queryResults);
     });
   }
 
   if (databaseType === 'SQL') {
-    const pool = connectSQL(index);
+    pool = connectSQL(index,URI);
     const getCommunications = 'SELECT * FROM communications';
     pool.query(getCommunications, (err, result) => {
       if (err) {
-        console.log(err);
-        message.sender.send(JSON.stringify('Database info could not be retreived.'));
+       return message.sender.send(JSON.stringify('Database info could not be retrieved.'));
       }
+      console.log('Connected to SQL Database')
+      //queryResults is an array of objects with the following keys {"id","currentmicroservice","targetedendpoint","reqtype","resstatus","resmessage","timesent"}
       const queryResults = JSON.stringify(result.rows);
       // Asynchronous event emitter used to transmit query results back to the render process.
-      message.sender.send('overviewResponse', queryResults);
+      return message.sender.send('overviewResponse', queryResults);
     });
   }
 });
@@ -128,27 +145,27 @@ ipcMain.on('detailsRequest', (message, index) => {
   ).services[index][1];
 
   if (databaseType === 'MongoDB') {
-    connectMongoose(index);
     HealthInfoSchema.find({}, (err, data) => {
       if (err) {
         message.sender.send('detailsResponse', JSON.stringify(err));
       }
       const queryResults = JSON.stringify(data);
       // Asynchronous event emitter used to transmit query results back to the render process.
-      message.sender.send('detailsResponse', queryResults);
+      return message.sender.send('detailsResponse', queryResults);
     });
   }
 
   if (databaseType === 'SQL') {
-    const pool = connectSQL(index);
+
+    // const pool = connectSQL(index);
     const getHealth = 'SELECT * FROM healthInfo';
     pool.query(getHealth, (err, result) => {
       if (err) {
         message.sender.send('detailsResponse', JSON.stringify('Database info could not be retreived.'));
       }
       const queryResults = JSON.stringify(result.rows);
       // Asynchronous event emitter used to transmit query results back to the render process.
-      message.sender.send('detailsResponse', queryResults);
+      return message.sender.send('detailsResponse', queryResults);
     });
   }
 });

README.md

@@ -1,34 +1,88 @@
-##Chronos Microservice Debugger
-Chronos Microservice Debugger consists of an npm package with an optional Electron front end to visualize and monitor your microservices.
+# Chronos
+Chronos consists of an NPM package to be required into a user’s microservices that intercepts all http and gRPC microservice communications, as well as monitors the health of each microservice over time. This information is written to a user-owned database (PostgreSQL or NoSQL) where it is queried and rendered by the frontend utilizing Node in conjunction with a native, cross-platform Electron desktop application with React components to ensure agreement between the frontend and database.
 
-## Install
+## Why was Chronos created?
+As companies grow larger and begin to scale, they have a tendency to move from a monolithic code architecture and microservices and distributed systems architecture in order to build faster, more maintainable code.
+
+The process of modularizing a code bases and breaking a monolith into individual services can be a daunting task. How do you break apart and re-connect these services? There is often a transitional period where valuable time is spent debugging these connections between services.
+
+Chronos is deigned to meet the needs of companies and developers working to break down their monoliths into distributed systems by combining an NPM package together with an Electron application to monitor and assist in the debugging of their services.
+
+## How to Install Chronos
+The Chronos-Microservice-Debugger Express Middleware can be found on npm: https://www.npmjs.com/package/chronos-microservice-debugger
+
+To install the NPM package:
 ```javascript
 npm install chronos-microservice-debugger
 ```
 
-## Usage
+The Chronos Electron application is in progress and will soon be availble for public download for all platforms. Please stay tuned.
+
+## How to Use Chronos
 There are two main aspects to Chronos-Microservice-Debugger
-*Communication Monitor: Listens in on all microservice-microservice and microservice-client communication and monitors the response statuses and messages to ensure communications are making it to the correct destination successfully.
-*Health Monitor: The health monitor checks the status of your microservice every second and sends this health information to an optional electron frontend where it is visualized for easier use.
+1. Communication Monitor: Listens in on all microservice-microservice and microservice-client communication and monitors the response statuses and messages to ensure communications are making it to the correct destination successfully.
+2. Health Monitor: The health monitor checks the status of your microservice every second and sends this health information to an optional electron frontend where it is visualized for easier use.
+
+To use the npm package, there are three required parameters and an optional fourth parameter. You can enter the items as individual strings or as an array containing the three required parameters and one optional parameter.
 
+The parameters are:
+1. microserviceName: What do you want to name the current microservice
+2. databaseType: We currently support PostgreSQL and Mongo. Enter "mongo" or "sql"
+3. databaseURL: Where would you like to store your information? Enter the URL to your database
+4. queryFrequency: How often do you want microHealth to monitor the health of your database? It defaults to every second, but you can choose:
+  * "s" : The default, monitors every second
+  * "m" : Monitors every minute
+  * "h" : Monitors every hour
+  * "d" : Monitors once per day
+  * "w" : Monitors once per week
 
+String parameter example:
 ```javascript
-app.use('/', chronos-microservice-debugger.microCom('microserviceName', 'databaseType', 'databaseURL'))
-chronos-microservice-debugger.microHealth('microserviceName', databaseType, databaseURL))
+// How to use chronos-microservice-debugger
+app.use('/', chronos-microservice-debgugger.microCom('microserviceName', 'databaseType', 'databaseURL'))
+
+chronos-microservice-debugger.microHealth('microserviceName', 'databaseType', 'databaseURL', 'queryFrequency'))
+
+// Example using string parameters
+app.use('/', chronos-microservice-debugger.microCom('books', 'sql', 'thisIsMyURL'))
+// Note: microCom does not utilize queryFreq because it logs all communication when an endpoint is hit
+
+chronos-microservice-debugger.microHealth('books', 'sql', 'thisIsMyURL', 'h')
 ```
-Chronos uses a user-owned and provided database to ensure that your private data stays private. We currently support MongoDB and SQL/PostgreSQL databases.
 
-## Things in the Works
-*gRPC support
-*Ability to determine how often your microservice health is monitored (currently every second)
-*'Time Travel' to see how your microservices have changed over time
-*Docker health information for containerized microservices
-*Implement additional unit testing
+Array parameter example:
+```javascript
+let values = [
+  'microserviceName',
+  'databaseType',
+  'databaseURL',
+  'queryFrequency'
+]
+// How to use chronos-micrservice-debugger with an array parameter
+app.use('/', chronos-microservice-debgugger.microCom(values)
+
+chronos-microservice-debugger.microHealth(values)
+
+// Example using an array parameter
+let values = [
+  'books',
+  'mongo',
+  'thisIsMyNewURL',
+  'w'
+]
 
-## Links
-*Chronos Website: http://chronos.ninja
-*Gitub Page: https://github.com/oslabs-beta/Chronos
+app.use('/', chronos-microservice-debgugger.microCom(values)
+// Note: microCom does not utilize queryFreq because it logs all communication when an endpoint is hit
+
+chronos-microservice-debugger.microHealth(values)
+
+```
 
-## Contact Us
-For questions, requests, or more information, please contact us at teammicronos@gmail.com
+## How to Contribute to Chronos
+Chronos hopes to inspire an active community of both users and developers. For questions, comments, suggestions, please contact us at teammicronos@gmail.com or submit a pull request.
 
+## Created By
+* Duane McFarlane
+* Michelle Herrera
+* Mohtasim Chowdhury
+* Natalie Umanzor

app/assets/pieChart.png

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import logo from '../assets/logo2.png';
 import SetupContext from '../context/SetupContext';
 import ServicesDashboard from './ServicesDashboard.jsx';
@@ -10,37 +10,46 @@ const AddService = () => {
   const ChronosSetup = useContext(SetupContext);
 
   // Local state created for form entries ONLY.
-  const [dbState, setDbType] = useState('SQL');
+  const [dbState, setDbType] = useState('');
   const [uriState, setUri] = useState('');
   const [labelState, setLabel] = useState('');
 
   // Submits data provided by the user to added to the setting file.
   const onSubmit = () => {
     const userSettings = [labelState, dbState, uriState];
+
     // IPC communication used to update settings JSON with user input.
     ipcRenderer.send('submit', JSON.stringify(userSettings));
     ChronosSetup.setupRequired = ChronosSetup.toggleSetup(true);
     // Refresh window after submit.
     document.location.reload();
   };
+  //it is setting the dbState
+   useEffect(()=>{
+     setDbType(document.getElementById('dbType').value)
+    },[dbState, setDbType])
+
 
   return (
     <div className="mainContainer">
       <img src={logo} alt="logo" />
       <h2 className="signUpHeader">Enter Your Database Information</h2>
       <form>
         Database Type:
-        <select value={dbState} onChange={(e) => setDbType(e.target.value)}>
+        {/* the select e.target.value of onchange is reading the value SQL and MongDB, the value the setState is delay by one action. Stack Over Flow says the action is an async call so dbState is updated late. So I did another setDbtype callwith useEffect*/}
+        <select id="dbType" onChange={()=>setDbType(document.getElementById('dbType').value)}>
           <option value="SQL">SQL</option>
           <option value="MongoDB">MongoDB</option>
         </select>
         Database URI:
+        {/* This is where the uri value is set with setUri */}
         <input
           className="userInput"
           id="dburi"
           onChange={(e) => setUri(e.target.value)}
           placeholder="Database URI"
         />
+        {/* This is where the name of the database is set with setLabel */}
         Database Name:
         <input
           className="userInput"

app/components/AddService.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import RequestTypesChart from '../charts/request-type-chart.jsx';
+import ResponseCodesChart from '../charts/response-code-chart.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';
+
+const Modal = (props) => {
+  // Destructuring props to make linter happy
+  const {
+    modalChart, service, toggleModalDisplay, chartTitle,
+  } = props;
+  //  Dictionary used to render proper data chart within Modal component upon rendering
+  const dict = {
+    request: <RequestTypesChart service={service} />,
+    response: <ResponseCodesChart service={service} />,
+    speed: <SpeedChart service={service} />,
+    processes: <ProcessesChart service={service} />,
+    latency: <LatencyChart service={service} />,
+    temperature: <TemperatureChart service={service} />,
+    memory: <MemoryChart service={service} />,
+  };
+
+  // event.stopPropogation allows the user to interact with the chart as opposed to a click on the
+  // chart bubbling out and closing the Modal.
+  return (
+    <div id="modalWindow" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>
+      <div id="modalContent" onClick={(event) => event.stopPropagation()}>
+        <h3 id="chartTitle">{`${service} - ${chartTitle}`}</h3>
+        <button id="modalCloseButton" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>&times;</button>
+        {dict[modalChart]}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;