@chronosmicro/display NPM

Chronos

⭐️ Star us on GitHub! ⭐️

Visit our website at chronoslany.com.

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 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

Features

Cloud-Based Instances:
- 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
Local instances utilitizing @chronosmicro/tracker NPM package:
- 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 and Docker monitoring via Prometheus server and Grafana visualization.
- Compatible with
- Monitor an cluster via the JMX Prometheus Exporter
- Supports and databases

Installation

This is for the latest Chronos version 12.0 release.

NPM Package

In order to use Chronos within your own application, you must have the @chronosmicro/tracker dependency installed.

The @chronosmicro/tracker package tracks your application's calls and scrapes metrics from your system.

NOTE: The Chronos tracker code is included in the chronos_npm_package folder for ease of development, but the published NPM package can be downloaded by running npm install @chronosmicro/tracker.

For more details on the NPM package and instructions for how to use it, please view the Chronos NPM Package README.

Chronos Desktop Application

WSL2 Environment

If you wish to launch the Electron Application in an WSL2 envirronment(Ubuntu) you may need the following commands for an Electron window to appear

Install VcXsrv
Run the following command in the terminal

sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev

After running your VcXsrv instance, run the following command in the terminal

export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"

Creating User Database

NOTE: You must create your own user database

Create a MongoDB database in which to store user information and insert it on line 2 within the UserModel.ts (electron/models/UserModel.ts) file.
- This database will privately store user information.
Once this is set up, you can create new users, log in, and have your data persist between sessions.

Running the Chronos desktop app in development mode

From the root directory, run npm install
Run npm run build
Open a new terminal and run npm run dev:app to start the Webpack development server
Open a new terminal and run npm run dev:electron to start the Electron UI in development mode .

Packing the Chronos desktop app into an executable

From the root directory, run npm run build
Run npm run package
Find the chronos.app executable inside the newly created release-builds folder in the root directory.

Examples

We provide eight example applications for you to test out both the Chronos NPM package and the Chronos desktop application:

Additional documentation on how Chronos is used in each example can be found in the Chronos NPM Package README.

AWS

The AWS folder includes 3 example applications with instructions on how to deploy them in AWS platforms. Note that using AWS services may cause charges.

The ECS folder includes an web application ready to be containerized using Docker. The instruction shows how to deploy application to ECS using Docker CLI command, and it will be managed by Fargate services.
The EC2 folder includes a React/Redux/SQL web application ready to be containerized using Docker. The instruction shows how to deploy application using AWS Beanstalk and connect application to RDS database. Beanstalk service will generate EC2 instance.
The EKS folder includes a containerized note taking app that uses a Mongo database as its persistent volume. The instructions show how to deploy this application on EKS, how to monitor with Prometheus & Opencost, and how to use Grafana to grab visualizations.

Refer to the EC2 README, ECS README, and EKS README example in the AWS folder for more details.

Docker

In the folder within the master branch, we provide a sample dockerized microservices application to test out Chronos and to apply distributed tracing across different containers for your testing convenience.

The docker folder includes individual files in their respective directories. A docker-compose.yml is in the root directory in case you'd like to deploy all services together.

Refer to the Docker README in the docker folder for more details.

gRPC

The gRPC folder includes an HTML frontend and an Express server backend, as well as proto files necessary to build package definitions and make gRPC calls. The reverse_proxy folder contains the server that requires in the clients, which contain methods and services defined by proto files.

Refer to the gRPC README in the gRPC folder for more details.

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, Prometheus server, and Grafana.

Refer to the Kubernetes README in the kubernetes folder for more details.

Microservices

In the microservices folder, we provide a sample microservice application that successfully utilizes Chronos to apply all the powerful, built-in features of our monitoring tool. You can then visualize the data with the app.

Refer to the microservices README in the microservices folder for more details.

Testing

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.

Contributing

Development of Chronos is open source on GitHub through the tech accelerator OS Labs, and we are grateful to the community for contributing bug fixes and improvements.

Read our contributing README to learn how you can take part in improving Chronos.

@chronosmicro/display v12.0.1