Merge pull request #13 from hodesza/Static_files

DerekQuoc · web-flow · commit 8b39aa87d26e · 2021-02-03T15:42:38.000-08:00
Images look good, instructions are fairly clear.
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,18 +34,31 @@ 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 6.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_
 - Compatible with <img src="./app/assets/graphql-logo-color.png" alt="GraphQL" title="GraphQL" align="center" height="20" /></a>
 - Provides <a href="#"><img src="./app/assets/docker-logo-color.png" alt="Docker" title="Docker" align="center" height="20" /></a> container stats (e.g. ID, memory usage %, CPU usage %, running processes, etc.)
 - Supports <a href="#"><img src="./app/assets/postgres-logo-color.png" alt="PostgreSQL" title="PostgreSQL" align="center" height="20" /></a> and <img src="./app/assets/mongo-logo-color.png" alt="MongoDB" title="MongoDB" align="center" height="20" /></a> databases
@@ -87,7 +100,7 @@ To use Chronos in your existing application, download and install the following
 npm install chronos-tracker
 ```
 
-### Configure Chronos
+### Configure Chronos for REST or gRPC
 
 Similarly, in the **root directory** of _each of your microservice applications_, create a `chronos-config.js` file with properties listed below:
 
@@ -101,6 +114,7 @@ chronos.use({
   interval: 2000,
   dockerized: true,
   database: {
+    connection: 'REST',
     type: 'MongoDB',
     URI: process.env.MONGO_URI,
   },
@@ -115,6 +129,7 @@ The `interval` property is optional and takes in an integer. This controls the C
 The `dockerized` property is optional and should be specified as `true` if the server is running inside of a Docker container. Otherwise, this should be `false`. If omitted, Chronos will assume this server is not running in a container.
 
 The `database` property is required and takes in the following:
+- `connection` which should be a string and only supports 'REST' and 'gRPC'
 - `type` which should be a string and only supports 'MongoDB' and 'PostgreSQL'.
 - `URI` which should be a connection string the database you intend Chronos to write and record data regarding health, HTTP route tracing, and container infomation to. A `.env` is recommended.
 
@@ -126,14 +141,15 @@ The `notifications` property is optional. Jump to the section below, [Notificati
 <br>
 <br>
 
-### Initialize Chronos
+### Initialize Chronos for REST
 
 Wherever you create an instance of your server (see example below),
 
 ```js
-// Example 
+// Example for REST
 const express = require('express');
 const app = express());
+
 ```
 
 you will also need to require in `chronos-tracker` and initialize Chronos, as well as the `./chronos-config` file. You will then need to invoke `chronos.propagate()` to initiate the route tracing, in addition to implementing `chronos.track()` for all endpoints.
@@ -149,8 +165,110 @@ app.use('/', chronos.track());
 ```
 
 You should be good to go! The last step, **Docker Configuration**, is **only applicable** if you need to configure <a href="#"><img src="./app/assets/docker-logo-color.png" alt="Docker" title="Docker" align="center" height="20" /></a> for your application. 
+
 <br>
 
+
+### Initialize Chronos for gRPC
+
+Wherever you create an instance of your server (see example below),
+
+
+```js
+  // Example of gRPC server
+  const server = new grpc.Server();
+
+  server.bindAsync("127.0.0.1:30044", grpc.   ServerCredentials.createInsecure(), () => {
+    server.start();
+    console.log("Server running at http://127.0.0.1:30044");
+});
+```
+you will also need to require Chronos-tracker, Chronos-config, and dotenv.config(if this is used). For health data simply use Chronos.track()
+
+
+
+```js
+//track health data
+const chronos = require('chronos-tracker');
+require('./chronos-config');
+require('dotenv').config(); // set up environment variables in .env
+const BookModel = require('./BookModel');
+
+chronos.track()
+```
+To trace requests, first wrap the gRPC client using Chronos
+```js
+const grpc = require('@grpc/grpc-js');
+const protoLoader = require('@grpc/proto-loader');
+const chronos = require('chronos');
+
+const PROTO_PATH = './order.proto';
+
+const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
+  keepCase: true,
+  longs: String,
+  enums: String,
+  arrays: true,
+});
+const OrderToBookService = grpc.loadPackageDefinition(packageDefinition).OrderToBook;
+const bookClient = new OrderToBookService('localhost:30044', grpc.credentials.createInsecure());
+
+const ClientWrapper = chronos.ClientWrapper(bookClient, OrderToBookService);
+```
+Next wrap the gRPC server  using Chronos 
+```js
+
+  const ServerWrapper = chronos.ServerWrapper(server,  Proto.protoname.service, {
+    AddBook: (call, callback) => {
+    // console.log(call.metadata)
+    // get the properties from the gRPC client call
+      const { title, author, numberOfPages, publisher, bookID } = call.request;
+    // create a book in our book collection
+      BookModel.create({
+        title,
+        author,
+        numberOfPages,
+        publisher,
+        bookID,
+      });
+      callback(null, {});
+    },
+  });
+})
+```
+For any request you wish to trace, require uuidv4 and write the following code where the initial gRPC request begins,
+```js
+const require { v4: uuidv4} = require('uuid')
+const createMeta = () => {
+  const meta = new grpc.Metadata();
+  meta.add('id', uuidvd());
+  return meta
+}
+```
+and then invoke createMeta as a third argument to any client method that is the beginning of the request path.
+
+```js
+orderClient.AddOrder(
+    order,
+    (err, data) => {
+      if (err !== null) {
+        console.log(err);
+        // could not add order because bookID does not exist
+        return res.sendStatus(404);
+      }
+      console.log('addOrder response: ', data);
+      return res.sendStatus(200);
+    },
+    createMeta()
+  );
+
+```
+Finally, on all servers that will be involved in the request path, invoke `chronos.link` with parameters of `client` and `ServerWrapper` in the server wrapper.
+
+```js
+chronos.link(client, ServerWrapper);
+```
+
 ### Docker Configuration
 
 Again, this step is **only applicable** if you are currently using <a href="#"><img src="./app/assets/docker-logo-color.png" alt="Docker" title="Docker" align="center" height="20" /></a> containers for your microservices. 
@@ -266,9 +384,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>
 
 #
@@ -286,7 +404,7 @@ The **'middleware'** branch is the current codebase for the <a href="#"><img src
 - <a href="#"><img src="./app/assets/node-logo-color.png" alt="Node" title="Node" align="center" height="30" /></a>
 - <a href="#"><img src="./app/assets/express-logo-color.png" alt="Express" title="Express" align="center" height="30" /></a>
 - <a href="#"><img src="./app/assets/http-logo-color.png" alt="HTTP" title="HTTP" align="center" height="30" /></a>
-- <a href="#"><img src="./app/assets/grpc-logo-color.png" alt="gRPC" title="gRPC" align="center" height="30" /></a> _coming soon_
+- <a href="#"><img src="./app/assets/grpc-logo-color.png" alt="gRPC" title="gRPC" align="center" height="30" /></a> 
 - <a href="#"><img src="./app/assets/graphql-logo-color.png" alt="GraphQL" title="GraphQL" align="center" height="30" /></a>
 - <a href="#"><img src="./app/assets/docker-logo-color.png" alt="Docker" title="Docker" align="center" height="30" /></a>
 - <a href="#"><img src="./app/assets/aws-logo-color.png" alt="AWS" title="AWS" align="center" height="30" /></a>
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:johndoe@cluster0-abcdef.mongodb.net/';
+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),
