Merge pull request #65 from oslabs-beta/dev

Chronos 6.0

Author: DerekQuoc

.d.ts

@@ -1 +1 @@
-declare module '*.png'
+declare module '*.png'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -1,8 +1,48 @@
+# JS Project-Specific #
+#######################
 node_modules
-.eslintrc.js
-.DS_Store
 dist
 build
+release-builds
 coverage
 __tests__/**/__snapshots__
-release-builds
+.env
+
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+

.vscode/settings.json

@@ -0,0 +1 @@
+123,125

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.

README.md

@@ -17,35 +17,46 @@
 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
-
 - [Features](#features)
 - [Demo](#demo)
 - [Installation](#installation)
     - [Pre-Installation](#pre-installation)
     - [Install Dependencies](#install-dependencies)
-    - [Configure Chronos](#configure-chronos)
-    - [Initialize Chronos](#initialize-chronos)
+    - [Configure Chronos Tracker](#configure-chronos-tracker)
+    - [Initialize Chronos Tracker](#initialize-chronos-tracker)
     - [Docker Configuration](#docker-configuration)
+    - [Start Chronos](#start-chronos)
 - [Notifications](#notifications)
     - [Slack](#slack)
     - [Email](#email)
 - [Branches](#branches)
-    - [Master](#master-branch)
+    - [Master Branch](#master-branch)
       - [Examples](#examples)
         - [Microservices](#microservices)
         - [Docker](#docker)
-    - [Middleware](#middleware-branch)
+    - [gRPC Branch](#grpc-branch)
 - [Technologies](#technologies)
 - [License](#license)
 
 #
 ###### Return to [Top](#Chronos)
 <br>
 
+## <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 database and would see its microservices listed even when users clicked on applications using other MongoDB databases
+- Chronos now support monitoring for gRPC!
+  - Distributed tracing across network request
+  - Currently chronos gRPC tracing for MongoDB and PostgresQL
+
 ## 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
@@ -65,8 +76,8 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 ## Installation
 This is for the latest Chronos version **5.1 release and later**.
 
-- Stable release: 5.1.0
-- LTS release: 5.0.1
+- Stable release: 6.1.0
+- LTS release: 6.1.0
 
 ### Pre-Installation
 Make sure you're running version 12.18.3 of <a href="#"><img src="./app/assets/node-logo-color.png" alt="Node" title="Node" align="center" height="20" /></a></a>, which is the most recent LTS (long-term support) version. 
@@ -87,7 +98,7 @@ To use Chronos in your existing application, download and install the following
 npm install chronos-tracker
 ```
 
-### Configure Chronos
+### Configure Chronos Tracker
 
 Similarly, in the **root directory** of _each of your microservice applications_, create a `chronos-config.js` file with properties listed below:
 
@@ -101,8 +112,9 @@ chronos.use({
   interval: 2000,
   dockerized: true,
   database: {
+    connection: 'REST',
     type: 'MongoDB',
-    URI: process.env.MONGO_URI,
+    URI: process.env.URI,
   },
   notifications: [],
 });
@@ -115,6 +127,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 +139,16 @@ The `notifications` property is optional. Jump to the section below, [Notificati
 <br>
 <br>
 
-### Initialize Chronos
+### Initialize Chronos Tracker
+#### Initialize Chronos Tracker 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 +164,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 Tracker 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. 
@@ -173,6 +290,11 @@ If you're using `docker-compose` to start up multiple containers, you can add a
 volumes:
   - "/var/run/docker.sock:/var/run/docker.sock"
 ```
+
+### Start Chronos
+
+Once you have configured and intialized Chronos Tracker, it will be automatically recording monitoring data when your servers are running. Finally, start the Chronos desktop app to view that data! After cloning our [GitHub repo](https://github.com/open-source-labs/Chronos), run `npm install` and `npm run both` to start Chronos. Alternatively, you can download an [executable for Mac](https://chronoslany.com/Chronos.dmg). Add your application in the Chronos app dashboard with the same URI you used in your Chronos Tracker configuration. Click on it and start monitoring!
+
 #
 ###### Return to [Top](#Chronos)
 <br>
@@ -266,9 +388,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 +408,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>