Updated App Instructions

Created README.md for gRPC example microservices (still need gRPC wrapper instruction) Updated and Finished README.md for express microservices example Updated and Finished CONTRIBUTING.md with proper explanation of how to use app as developers
open-source-labs · jessllee · Mar 9, 2022 · Jan 20, 2021 · Jan 20, 2021 · Jan 20, 2021
commit f2857bdc71e6aa4c018a77af83f099cdfa2861a9
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -13,6 +13,14 @@ Chronos welcomes all pull requests.
 5. Make sure code is formatted with `prettier` and follows the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/blob/master/react/README.md).
 6. Create a pull request to `master`.
 
+## Getting started
+- `npm run bot`: Run Node and Electron at the same time to start Chronos app
+  - To make changes to codebase on the Main Process
+    - Files in the main process must be compiled prior to starting the app
+      - In the terminal un Chronos directory, input `tsc` to comile typescript files
+      - Once compiled, `npm run both`
+      * Note** If typescript is not installed, `npm install -g typescript` 
+
 ## Issues
 
 Please do not hesitate to file issues. Chronos is based off of community feedback and is  always looking for ways to get better. The team behind Chronos is interested to hear about your experience and how we can improve it.

diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 Chronos is a comprehensive developer tool that monitors the health and web traffic of servers, microservices, and containers. Use Chronos  to see real-time data monitoring and receive automated notifications over Slack or email.
 
 ## Table of Contents
-
+- [New-Features](#new-feature)
 - [Features](#features)
 - [Demo](#demo)
 - [Installation](#installation)
@@ -34,15 +34,29 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
       - [Examples](#examples)
         - [Microservices](#microservices)
         - [Docker](#docker)
-    - [Middleware](#middleware-branch)
+    - [gRPC](#grpc-branch)
 - [Technologies](#technologies)
 - [License](#license)
 
 #
 ###### Return to [Top](#Chronos)
 <br>
 
-## Features 
+## <img src ="./app/assets/fire.png" height=22 > New-Features <img src ="./app/assets/fire.png" height=24>
+
+- New UI Features
+  - Dark and Light mode options now available across user sessions.
+  - Updated charts to now also support gRPC calls
+  - Integrated log to provide users with relational data on request & response cycle
+
+- Bug Fixes
+  - Fixed bug where users could only connect to one MongoDB databsae adn would see its microservices listed even when uesrs clicked on apllications using other MongoDb databases
+
+- Chronos now support monitoring for gRPC!
+  - Distributed tracing across network request
+  - Currently chronos gRPC tracing for Mongodb and PostgresQL
+
+## Ver 5.0 Features 
 
 - Distributed tracing enabled across microservices applications
 - Supports <a href="#"><img src="./app/assets/http-logo-color.png" alt="HTTP" title="HTTP" align="center" height="20" /></a> protocol, with <img src="./app/assets/grpc-logo-color.png" alt="gRPC" title="gRPC" align="center" height="20" /></a> _coming soon_
@@ -266,9 +280,9 @@ Refer to the [README](link) in the `docker` folder for more details.
 
 <br>
 
-### Middleware Branch
+### gRPC Branch 
+The **'gRPC'** branch is the current codebase for the <a href="#"><img src="./app/assets/npm-logo-color.png" alt="NPM" title="NPM" align="center" height="20" /></a> package, which is what you will install in your own application in order to use Chronos. Download the <a href="#"><img src="./app/assets/npm-logo-color.png" alt="NPM" title="NPM" align="center" height="20" /></a> package [here](https://www.npmjs.com/package/chronos-tracker).
 
-The **'middleware'** branch is the current codebase for the <a href="#"><img src="./app/assets/npm-logo-color.png" alt="NPM" title="NPM" align="center" height="20" /></a> package, which is what you will install in your own application in order to use Chronos. Download the <a href="#"><img src="./app/assets/npm-logo-color.png" alt="NPM" title="NPM" align="center" height="20" /></a> package [here](https://www.npmjs.com/package/chronos-tracker).
 <br>
 
 #

diff --git a/app/assets/dotenvSetup.png b/app/assets/dotenvSetup.png
diff --git a/app/assets/fire.png b/app/assets/fire.png
diff --git a/examples/gRPC/README.md b/examples/gRPC/README.md
@@ -0,0 +1,87 @@
+![Chronos logo](https://raw.githubusercontent.com/Chronos2-0/Chronos/master/app/assets/logo2.png)
+## Microservices Architecture
+Microservices architecture for testing [Chronos](https://github.com/oslabs-beta/Chronos), a microservice communication and health visualizer.
+
+## Purpose and Design
+This sample microservices architecture allows developers to explore the functionality of Chronos with gRPC calls. It consists of 3 microservices, which are contained within the directories:
+- Reverse Proxy
+- Books
+- Orders
+
+Each microservice has its own server, which receives requests from both the client and from other microservices. Books, Customers, and Orders also have their own databases, which they can query to respond to those requests.
+
+## Getting Started w/ gRPC Example Microservices 
+
+Follow **'main'** branch READ>ME steps: Pre-Installation, Install Dependencies before start. 
+
+On each microservice in example/microserivces, perform the following steps
+  - *Do this for microservices: books, orders, & reverse proxy
+  - Install dotenv `npm install dotenv`
+  - Create a .env file across each ,microservices and input your own Mongodb Atlast URI for both Microservice_URI and CHRONOS_URI
+    - ** Reverse Proxy .env file will only require CHRONOS_URI
+
+```
+BOOK_URI = mongodb+srv://<username>:<password>@cluster0.o2hx5.mongodb.net/<dbname>?retryWrites=true&w=majority
+
+CHRONOS_URI = mongodb+srv://<username>:<password>@cluster0.o2hx5.mongodb.net/<dbname>?retryWrites=true&w=majority
+```
+  - In each Microservice Mode.js file import and set the Microservice_URI
+
+```
+const myURI = process.env.BOOK_URI;
+
+```
+
+  - In each of the chronos-config.js files, import and set URI property in database to the Chronos_URI as shown
+
+```
+require('dotenv').config();
+const chronos = require('chronos-tracker');
+
+chronos.use({
+  microservice: 'name of microservice e.g books or orders',
+  interval: 2000,
+  database: {
+      type: 'MongoDB'
+      URI: process.env.CHRONOS_URI
+    },
+  notifications: [],
+})
+```
+  - **Note: The Initialize Chronos step is already taken care of for you. 
+  - Run `npm run start` in each folder directory
+    - To do so, within each microservice directory, install all dependencies using the `npm install`
+  - Head over to localhost:3030 to view reverse proxy acting as the frontend of this microservice example
+  - Start adding data!
+  - Run `npm run both` to start Electron app
+    - Add a new application in Chronos app dashboard.
+    - The URI should be your CHRONOS_URI
+
+
+**To test the functionality of Chronos using this sample microservices architecture, you must install the [Chronos node module](https://www.npmjs.com/package/chronos-microservice-debugger3) within each microservice. _It is not pre-installed._ Installation instructions for both the Chronos node module and the Chronos desktop visualizer are below:**
+
+
+#### Electron desktop application
+
+After installing the node module in each microservice, download the Electron desktop application from the public [Chronos](https://github.com/oslabs-beta/Chronos) repo.
+
+Inside the downloaded directory, install all dependencies using the `npm install` command followed by the `npm run both` command to start the Electron desktop application.
+
+## Contributing
+
+Chronos hopes to inspire an active community of both users and developers. For questions, comments, or contributions, please submit a pull request.
+
+## People
+
+[Vince Ho](https://github.com/hodesza)
+[Matt Jiang](https://github.com/mattljiang)
+[Derek Lam](https://github.com/DerekQuoc)
+[Kit Loong Yee](https://github.com/kitloong1)
+## 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
diff --git a/examples/microservices/README.md b/examples/microservices/README.md
@@ -11,13 +11,53 @@ This sample microservices architecture allows developers to explore the function
 
 Each microservice has its own server, which receives requests from both the client and from other microservices. Books, Customers, and Orders also have their own databases, which they can query to respond to those requests.
 
-**You must replace the placeholder MongoDB Atlas URIs for the databases with your own _actual_ MongoDB Atlas URIs:**
+## Getting Started w/ gRPC Example Microservices 
+
+Follow **'main'** branch READ>ME steps: Pre-Installation, Install Dependencies before start. 
+
+On each microservice in example/microserivces, perform the following steps
+  - *Do this for microservices: books, orders, & reverse proxy
+  - Install dotenv `npm install dotenv`
+  - Create a .env file across each ,microservices and input your own Mongodb Atlast URI for both Microservice_URI and CHRONOS_URI
+    - ** Reverse Proxy .env file will only require CHRONOS_URI
+
+```
+BOOK_URI = mongodb+srv://<username>:<password>@cluster0.o2hx5.mongodb.net/<dbname>?retryWrites=true&w=majority
+
+CHRONOS_URI = mongodb+srv://<username>:<password>@cluster0.o2hx5.mongodb.net/<dbname>?retryWrites=true&w=majority
+```
+  - In each Microservice Mode.js file import and set the Microservice_URI
+
+```
+const myURI = process.env.BOOK_URI;
+
+```
+
+  - In each of the chronos-config.js files, import and set URI property in database to the Chronos_URI as shown
 
 ```
-const myURI = 'mongodb+srv://johndoe:[email protected]/';
+require('dotenv').config();
+const chronos = require('chronos-tracker');
+
+chronos.use({
+  microservice: 'name of microservice e.g books or orders',
+  interval: 2000,
+  database: {
+      type: 'MongoDB'
+      URI: process.env.CHRONOS_URI
+    },
+  notifications: [],
+})
 ```
+  - **Note: The Initialize Chronos step is already taken care of for you. 
+  - Run `npm run start` in each folder directory
+    - To do so, within each microservice directory, install all dependencies using the `npm install`
+  - Head over to localhost:3000 to view reverse proxy acting as the frontend of this microservice example
+  - Start adding data!
+  - Run `npm run both` to start Electron app
+    - Add a new application in Chronos app dashboard.
+    - The URI should be your CHRONOS_URI
 
-In order to start the entire application, you will need to start each microservice's server. To do so, within each microservice directory, install all dependencies using the `npm install` command followed by the `npm start` command. You will then be able to interact with the application (as though you are a user) on a barebones frontend, which is being served by the Reverse Proxy server and can be found at localhost:3000.
 
 **To test the functionality of Chronos using this sample microservices architecture, you must install the [Chronos node module](https://www.npmjs.com/package/chronos-microservice-debugger3) within each microservice. _It is not pre-installed._ Installation instructions for both the Chronos node module and the Chronos desktop visualizer are below:**
 
@@ -84,14 +124,18 @@ app.use('/', cmd.microCom(values)
 
 After installing the node module in each microservice, download the Electron desktop application from the public [Chronos](https://github.com/oslabs-beta/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.
+Inside the downloaded directory, install all dependencies using the `npm install` command followed by the `npm run both` command to start the Electron desktop application.
 
 ## Contributing
 
 Chronos hopes to inspire an active community of both users and developers. For questions, comments, or contributions, please submit a pull request.
 
 ## People
 
+[Vince Ho](https://github.com/hodesza)
+[Matt Jiang](https://github.com/mattljiang)
+[Derek Lam](https://github.com/DerekQuoc)
+[Kit Loong Yee](https://github.com/kitloong1)
 [Tim Atapagra](https://github.com/timpagra),
 [Mohtasim Chowdhury](https://github.com/mohtasim317),
 [Ousman Diallo](https://github.com/Dialloousman),