Merge pull request #19 from HEET-Group/reademe

Readme

Author: edwinlny

README.md

@@ -1,6 +1,10 @@
 <a href="https://chronoslany.com/">
     <img src="assets/animated_logo.gif" alt="Chronos" title="Chronos" align="center" height="500" />
 </a>
+<hr>
+<a href="https://chronoslany.com/">
+    <img src="assets/demo.gif" alt="Chronos" title="Chronos" align="center" height="500" width="auto" />
+</a>
 
 <br>
 
@@ -16,27 +20,31 @@
 ### ⭐️ Star us on GitHub! ⭐️
 **Visit our website at [chronoslany.com](https://chronoslany.com/).**
 
-Chronos is a comprehensive developer tool that monitors the health and web traffic of servers, microservices, containers, and Amazon Web Services (AWS). Use Chronos to see real-time data monitoring and receive automated notifications over Slack or email.
+Chronos is a comprehensive developer tool that monitors the health and web traffic for containerized (Docker & Kubernetes) and non-containerized microservices communicated via REST APIs or gRPC, whether hosted locally or on Amazon Web Services (AWS). Use Chronos to see real-time data monitoring and receive automated notifications over Slack or email.
 
 
 ## What's New?
 
-### With Chronos 11.0:
+### With Chronos 12.0:
+
+- Improved metrics visualization by embedding more interactive and flexible Grafana charts for Docker and Kubernetes examples.
+- Increased test coverage up to 80% by crafting comprehensive unit, integration, and end-to-end tests using Jest and Selenium.
+- Fixed Docker example for not being able to display metrics correctly.
+- Designed an interactive 3D visualization showcasing the infrastructure of Kubernetes clusters (Namespace, Service, Pod), providing enhanced insights into the intricate resource distribution and configuration within the cluster for developers and users.
+- Engineered workflow efficiencies by orchestrating CI/CD pipelines, automating testing, and establishing deployment procedures, resulting in accelerated development cycles and higher reliability.
+- Increased Typescript coverage for better code quality and application robustness.
+- Updated README instructions within the provided Docker and Kubernetes examples for how to configure Prometheus and Grafana in a smooth and easy way. 
+- Revised README instructions for the `@chronosmicro/tracker` NPM package for how to use this package to monitor their own applications.
+
 
+**Previously implemented updates:**
 - Added interactive charting to better visualize metrics and increase user engagement with their data
 - Followed best test-driven development practices and increased testing with React Testing and Jest for the front end
 - Overhauled user database security, mitigating database breaches and providing a safer experience
 - Bug fixes and UI tweaks, creating a more pleasant user experience
 - Updated outdated README instructions within the provided Docker, gRPC, Kubernetes, and microservices examples
 - Revised README instructions for the `@chronosmicro/tracker` NPM package
 
-
-**Previously implemented updates:**
-- Streamlined approach to access and dynamically display Grafana dashboards for deployed EKS clusters (utilizing Prometheus data scraping and generated Grafana dashboards) using the Grafana API.
-- Option to choose between cloud hosted services and local services, giving Chronos the ability to monitor instances and clusters on AWS' EC2, ECS, and EKS platforms.
-- An updated AWS Graphs Container to dynamically render plots for EC2 or ECS data fetched with Electron using event listeners connecting to AWS CloudWatch w/ the aws-sdk package, as well as utilizing Prometheus data scraping and Grafana integration to fetch and render EKS data.
-- Step-by-step instructions on setting up a new, functional EC2 instances, ECS clusters, and EKS clusters, ready to be monitored and tested by the app.
-
 ## Features
 
 - Cloud-Based Instances:
@@ -45,15 +53,15 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
     - Enables distributed tracing enabled across microservices applications
     - Displays real-time temperature, speed, latency, and memory statistics for local services
     - Displays and compares multiple microservice metrics in a single graph
-    - Allow Kubernetes monitoring via Prometheus server
+    - Allow Kubernetes and Docker monitoring via Prometheus server and Grafana visualization.
     - Compatible with <img src="assets/graphql-logo-color.png" alt="GraphQL" title="GraphQL" align="center" height="20" /></a>
     - Monitor an <a href="#"><img src="assets/pngwing.com.png" alt="Apache Kafka" title="Apache Kafka" align="center" height="20" /></a> cluster via the JMX Prometheus Exporter
     - Supports <a href="#"><img src="assets/postgres-logo-color.png" alt="PostgreSQL" title="PostgreSQL" align="center" height="20" /></a> and <img src="assets/mongo-logo-color.png" alt="MongoDB" title="MongoDB" align="center" height="20" /></a> databases
 
 
 # Installation
 
-This is for the latest Chronos **version 11.0 release**.
+This is for the latest Chronos **version 12.0 release**.
 
 ## NPM Package
 
@@ -68,6 +76,7 @@ For more details on the NPM package and instructions for how to use it, please v
 #
 
 <!-- ### Node Version -->
+<!-- v12 notes: Our team also had no issues - we ran Node 18 and Electron 22-->
 <!-- v11 notes: Our team also had no issues - we ran Node 18.-->
 <!-- v10 notes: Our team never reverted to version 16.17.1 and had no issues running Node 18 and Electron 22 together. Commenting this out for future iteration teams' reference. -->
 <!-- Make sure you're running version 16.17.1 of <img src="assets/node-logo-color.png" alt="Node" title="Node" align="center" height="20" />, to align with the <img src="assets/node-logo-color.png" alt="Node" title="Node" align="center" height="20" /> version used by <img src="assets/electron-logo-color.png" alt="Electron" title="Electron" align="center" height="20" /> version 22. -->
@@ -164,7 +173,7 @@ Refer to the [gRPC README](./examples/gRPC/README.md) in the `gRPC` folder for m
 
 #### _Kubernetes_
 
-The `kubernetes` folder includes a React frontend and an Express server backend, and the Dockerfiles needed to containerize them for Kubernetes deployment. The _launch_ folder includes the YAML files needed to configure the deployments, services, and configurations of the frontend, backend, and Prometheus server.
+The `kubernetes` folder includes a React frontend and an Express server backend, and the Dockerfiles needed to containerize them for Kubernetes deployment. The _launch_ folder includes the YAML files needed to configure the deployments, services, and configurations of the frontend, backend, Prometheus server, and Grafana.
 
 Refer to the [Kubernetes README](./examples/kubernetes/README.md) in the `kubernetes` folder for more details.
 
@@ -179,7 +188,7 @@ Refer to the [microservices README](./examples/microservices/README.md) in the `
 
 # Testing
 
-We've created testing suites for Chronos with React Testing and Jest - instructions on running them can be found in the [testing README](./__tests__/README.md).
+We've created testing suites for Chronos with React Testing, Jest, and Selenium for unit, integration, and end-to-end tests - instructions on running them can be found in the [testing README](./__tests__/README.md).
 #
 ## Contributing
 
@@ -189,12 +198,11 @@ Read our [contributing README](../../CONTRIBUTING.md) to learn how you can take
 
 ### **Last Iterating Team**
 
-#### Chronos 11.0
-- [Lucie Seidler](https://github.com/LucieSeidler)
-- [Jeffrey Na](https://github.com/jeffreyNa)
-- [Brisa Zhu](https://github.com/beezoo10)
-- [Kelsi Webb](https://github.com/kelsicw)
-- [Justin Poirier](https://github.com/jcpoirier20)
+#### Chronos 12.0
+- [Tyler Coryell](https://github.com/Tcoryell)
+- [Edwin Leong](https://github.com/edwinlny)
+- [Eisha Kaushal](https://github.com/eishakaushal)
+- [Haoyu Liu](https://github.com/HaoyL666)
 
 
 #### Past [Contributors](contributors.md)
@@ -220,6 +228,11 @@ Read our [contributing README](../../CONTRIBUTING.md) to learn how you can take
 - <a href="#"><img src="assets/vis-logo-color.png" alt="Vis.js" title="Vis.js" align="center" height="30" /></a>
 - <a href="#"><img src="assets/plotly-logo-color.png" alt="Plotly.js" title="Plotly.js" align="center" height="30" /></a>
 - <a href="#"><img src="assets/pngwing.com.png" alt="Apache Kafka" title="Apache Kafka" align="center" height="30" /></a>
+- <a href="#"><img src="assets/grafana-logo.png" alt="Grafana" title="Grafana" align="center" height="40" /></a>
+- <a href="#"><img src="assets/selenium-logo.png" alt="Selenium" title="Selenium" align="center" height="30" /></a>
+- <a href="#"><img src="assets/prometheus-logo.png" alt="Prometheus" title="Prometheus" align="center" height="40" /></a>
+- <a href="#"><img src="assets/github-action-logo.png" alt="Github Action" title="Github Action" align="center" height="40" /></a>
+- <a href="#"><img src="assets/threeJS-logo.png" alt="Github Action" title="Github Action" align="center" height="40" /></a>
 
 
 ## License

assets/demo.gif

@@ -2,6 +2,7 @@
 - Bug Fixes
 - Refactored code for additional modularity and customization
 - Ability for developers to increase number of metrics monitored for microservices
+- Connected to Grafana interface.
 #
 
 ## Features 
@@ -10,7 +11,7 @@
 - Displays real-time temperature, speed, latency, and memory statistics
 - Display and compare multiple microservice metrics in a single graph
 - Monitor an Apache Kafka cluster via the JMX Prometheus Exporter
-- Monitor a Kubernetes cluster via a Prometheus monitoring server
+- Monitor Docker and Kubernetes cluster via a Prometheus monitoring server and display charts using Grafana
 
 #
 
@@ -215,6 +216,15 @@ module.exports = {
   promService: 'prometheus-service',
   promPort: 8080,
 
+    database: {
+    connection: 'REST',
+    type: process.env.CHRONOS_DB,
+    URI: process.env.CHRONOS_URI,
+  },
+
+
+  grafanaAPIKey: process.env.CHRONOS_GRAFANA_API_KEY,
+
   // ...
 }
 

assets/github-action-logo.png

@@ -33,4 +33,8 @@
 [Jeffrey Na](https://github.com/jeffreyNa),
 [Brisa Zhu](https://github.com/beezoo10),
 [Kelsi Webb](https://github.com/kelsicw),
-[Justin Poirier](https://github.com/jcpoirier20)
+[Justin Poirier](https://github.com/jcpoirier20)
+[Tyler Coryell](https://github.com/Tcoryell)
+[Edwin Leong](https://github.com/edwinlny)
+[Eisha Kaushal](https://github.com/eishakaushal)
+[Haoyu Liu](https://github.com/HaoyL666)

assets/grafana-logo.png

@@ -39,7 +39,7 @@ CHRONOS_GRAFANA_API_KEY = Bearer [the access token you created in step 3]
 ```
 docker build -t frontend:1.0 .
 ```
-**Mac Users:** Alternative to running the above command, `cd` into the scripts folder and run the `buildClient.sh` script
+**Mac Users:** Alternative to running the above command, `cd` into the scripts folder and run the `./buildClient.sh` script
 
 
 ## Build the Server
@@ -66,6 +66,11 @@ CHRONOS_URI = The URI to the desired MongoDB or PostgreSQL database to save heal
 docker build -t backend:1.0 .
 ```
 
+## Start the npm Server
+1. `cd` into the `server` folder inside `chronos_npm_package`, then run `npm install` to install all dependencies.
+
+2. run `npm start` to start npm server.
+
 
 ## Deploy the Cluster
 1. `cd` into the launch folder and run the following commands to start the services and deployments described in the YAML files:
@@ -76,10 +81,7 @@ kubectl apply -f frontend.yml
 
 **Mac Users:** Alternative to running the above commands, `cd` into the *scripts* folder and run the `startKuber.sh` script.
 
-
-2. `cd` into the `server` folder inside `chronos_npm_package`, then run `npm install` and `npm start`
-
-3. Check in Docker desktop if your containers have been created. You should see something similar to the following:
+2. Check in Docker desktop if your containers have been created. You should see something similar to the following:
 
 <p align="center">
   <img alt="Kubernetes containers created" src="../../assets/examples_kubernetes_created.png">
@@ -105,9 +107,9 @@ kubectl delete -f frontend.yml
 
 To teardown grafana, run the following commands:
 ```
-kubectl delete -f ../launch/grafana-datasource-config.yml
-kubectl delete -f ../launch/grafanaService.yml
-kubectl delete -f ../launch/grafana.yml
+kubectl delete -f launch/grafana-datasource-config.yml
+kubectl delete -f launch/grafanaService.yml
+kubectl delete -f launch/grafana.yml
 ```