Merge pull request #2 from HEET-Group/devDocker_v2

Dev docker v2

Author: edwinlny

README.md

@@ -27,9 +27,9 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 
 ### With Chronos 12.0:
 
-- Enhanced metrics visualization by integrating more interactive and adaptable Grafana charts, particularly for Docker and Kubernetes use cases.
+- Enhanced metrics visualization by integrating more interactive and adaptable Grafana charts for Docker and Kubernetes use cases.
 - Achieved an 80% boost in test coverage by formulating comprehensive unit, integration, and end-to-end tests employing Jest and Selenium.
-- Rectified issues with the Docker example, ensuring accurate metric display.
+- Implemented Prometheus data scraping functionality for Docker containers, facilitating seamless metric collection and monitoring.
 - Devised an immersive 3D visualization that effectively illustrates the Kubernetes cluster infrastructure, encompassing Namespace, Service, and Pod entities. This dynamic visualization provides developers and users with heightened insights into intricate resource allocation and configuration within the cluster.
 - Streamlined operational effectiveness by coordinating CI/CD pipelines, automating testing workflows, and establishing deployment protocols, ultimately leading to accelerated development cycles and heightened dependability.
 - Expanded Typescript coverage to enhance code quality and bolster application resilience.

__tests__/README.md

@@ -1,6 +1,10 @@
 # Testing 
 
 ### Preparation
+###
+### Frontend Testing
+
+For frontend testing, ensure you've prepared your environment as follows:
 
 1. React Testing Library versions 13+ require React v18. If your project uses an older version of React, be sure to install version 12
 ```
@@ -18,7 +22,7 @@ npm i @types/node
 npm install -D ts-node
 ```
 3. create jest.config.js 
-```
+```js
 module.exports = {
   verbose: true,
   setupFilesAfterEnv: ['./jest_setup/windowMock.js'],
@@ -34,13 +38,16 @@ module.exports = {
 };
 ```
 4. make sure jest_setup folder is at root directory of Chronos with styleMock.js and windowMock.js
-
+  ```js
   styleMock.js
   ```
+  ```js
   module.exports = {};
   ```
+  ```js
   windowMock.js
   ```
+  ```js
   // Mock window environment
   window.require = require;
 
@@ -50,9 +57,45 @@ module.exports = {
   // Mock get context
   HTMLCanvasElement.prototype.getContext = () => {};
   ```
-5. update database info inside test_settings.json 
+5. update database info inside `test_settings.json` 
 
 6. use `npm run test` to run jest tests
+###
+### Backend Testing
+
+For backend testing, ensure you've prepared your environment as follows:
+
+1. create `jest.config.js`
+```js
+module.exports = {
+  roots: ['<rootDir>'], // Set the root directory for test files (adjust this path to your test folder)
+  testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  testPathIgnorePatterns: ['/node_modules/', '/__tests__/'],
+};
+```
+2. install additional packages
+```
+npm i mongodb-memory-server
+```
+6. use `npm run backend-test` to run jest tests
+
+### End-to-End Testing
+
+Perform end-to-end testing with the following steps:
+
+1. install the following packages 
+```
+npm i selenium-webdriver
+npm i chromedriver
+```
+
+2. use `npm run dev:app` to start the app
+
+3. use `./node_modules/.bin/chromedriver` to run the Chromedriver executable
+
+4. use `npm run start:e2e` to run the end-to-end tests
 
 ## Contributing
 

app/containers/DockerHealthContainer.tsx

@@ -116,7 +116,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
 
         console.log("plotting grafana")
         grafanaChartsArray.push(
-          <GrafanaEventChart metricName={metricName} token={token} />);
+          <GrafanaEventChart metricName={metricName} token={token} label={'name'} value={service} />);
 
       }
     }

chronos_npm_package/README.md

@@ -1,9 +1,10 @@
 ## What's New?
+- Enhanced Metrics Collection: Docker now supports Prometheus metrics scraping, offering improved monitoring capabilities
+- Streamlined Visualization: Docker and Kubernetes integrate with Grafana to provide dynamic visualization of collected metrics
+- Kubernetes graph type customization and resource data processing 
 - Bug Fixes
 - Refactored code for additional modularity and customization
-- Ability for developers to increase number of metrics monitored for microservices
-- Connected to Grafana interface.
-- Ability to select graph type and process kubernetes resource data
+
 #
 
 ## Features 
@@ -12,7 +13,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 Docker and Kubernetes cluster via a Prometheus monitoring server and display charts using Grafana
+- Monitor Docker and Kubernetes clusters via a Prometheus monitoring server and display charts using Grafana
 
 #
 
@@ -54,10 +55,18 @@ module.exports = {
   mode: 'kubernetes',
   promService: 'prometheus-service',
   promPort: 8080,
+  grafanaAPIKey: process.env.CHRONOS_GRAFANA_API_KEY,
 
   // (c) Apache Kafka
   mode: 'kafka',
   jmxuri: '<insert URI>',
+
+  // (d) Docker
+  mode: 'docker',
+  promService: 'docker.for.mac.localhost',
+  promPort: 9090,
+  grafanaAPIKey: process.env.CHRONOS_GRAFANA_API_KEY,
+
   /*  USE ONE OF THE MODE-SPECIFIC CONFIGURATIONS ABOVE   */
 
   // Notifications
@@ -87,7 +96,7 @@ The `database` property is required and takes in the following:
 - `type` should be a string and only supports 'MongoDB' and 'PostgreSQL' at this time
 - `URI` should be a connection string to the database where you intend Chronos to write and record data regarding health, HTTP route tracing, and container infomation
 
-The `mode` property accepts a string that can either be 'microservices', 'kubernetes', or 'kafka'. There are other settings that depend on the mode choice, so these are broken down in the "Chronos Tracker for Microservices" section.
+The `mode` property accepts a string that can either be 'microservices', 'kubernetes', 'kafka', or 'docker'. There are other settings that depend on the mode choice, so these are broken down in the "Chronos Tracker for Microservices" section.
 
 The `notifications` property is an array that can be optionally left empty. It allows developers to be alerted when the server responds to requests with status codes >= 400. To set up notifications, set the value of the `notifications` property to an array of objects, each with a `type` and `settings` property. 
 
@@ -135,6 +144,7 @@ Chronos provides the option to send  emails. The properties that should be provi
 
 
 **NOTE: Email notification settings may require alternative security settings to work**
+#
 
 ### Chronos Tracker for "Microservices" Mode
 The mode `microservices` uses the additional setting `dockerized`, which indicates whether or not the microservice has been containerized with Docker. If omitted, Chronos will assume this server is not running in a container, i.e. `dockerized` will default to _false_. 
@@ -269,6 +279,42 @@ When viewing your information in the Chronos Electron application the data will
 
 **NOTE:** We provide a jmx_config.yaml file in the Chronos root folder for use with JMX prometheus that provides some useful baseline metrics to monitor.
 
+#
+### Chronos Tracker for "Docker" Mode
+Chronos monitors Docker containers by storing metric data through instant Prometheus queries within your Docker container environment.
+
+In `chronos-config.js`, configure the `mode` parameter to `docker`. Additionally, provide the name of the port where the Prometheus server is actively listening inside the container, and specify the name of the Prometheus service to enable DNS-based resolution of its IP address.
+
+Also add a `grafanaAPIKey` section, this API key will authorize Chronos for dashboard creation and updates in Grafana.
+
+```js
+// Excerpt from a chronos-config.js
+
+module.exports = {
+  // ...
+
+  mode: 'docker',
+  promService: 'docker.for.mac.localhost',
+  promPort: 8080,
+
+  grafanaAPIKey: process.env.CHRONOS_GRAFANA_API_KEY,
+
+  // ...
+}
+
+```
+
+Then, implement the subsequent code snippet within a **SINGLE** microservice that will be deployed only as a **SINGLE** container, and call `Chronos.docker`:
+
+```js
+const chronosConfig = require('./chronos-config.js');
+const Chronos = require('@chronosmicro/tracker');
+const chronos = new Chronos(chronosConfig);
+
+chronos.docker();
+```
+
+
 ### Chronos Tracker for gRPC
 
 To monitor your gRPC server, setup `chronos-config.js` as if it was a standard microservices example, but be sure to set the `connection` type to `gRPC`.

chronos_npm_package/package-lock.json

@@ -27,11 +27,11 @@ For additional details on how Chronos works this example, please review the Dock
 
 ## Grafana API KEY
 
-1. Run docker compose command below (LN 61) to start your Grafana container before you can access your service account token.
+1. To initiate your Grafana container and prepare for accessing your service account token, execute the following command: `docker-compose -f docker-compose.yml up`
 
-2. In your browser, go to `localhost:32000`, which will be the login page of grafana. Use `admin` as both username and password to login. You can change the password after login.
+2. In your browser, go to `localhost:32000`, which will be the login page of Grafana. Use `admin` as both username and password to login. You can change the password after login.
 
-3. Navigate to `Home -> Administration -> Service accounts`, then click `Add service account` to create an service account. Be sure to choose `Admin` as the role. Then click `Add service account token`, hit `generate`, you are done! Remember this token, you will be using this token to access Grafana HTTP API programmatically.
+3. Navigate to `Home -> Administration -> Service accounts`, then click `Add service account` to create a service account. Be sure to choose `Admin` as the role. Then click `Add service account token`, hit `generate`, you are done! Remember this token, you will be using this token to access Grafana HTTP API programmatically.
 
 ## Steps to Run Example
 Peform the following steps in each of the _books_, _customers_, _frontend_, and _orders_ directories
@@ -55,7 +55,7 @@ CHRONOS_GRAFANA_API_KEY = Bearer [the access token you created in above section
 
     - If you have the dependency as `"@chronosmicro/tracker": "file:./chronos_npm_package"`, which is a **local** file, make sure to change the version from `"file:./chronos_npm_package"` to `"^12.0.1"` and run npm install.  **Unless you are wanting to test local copies of the "Chronos_npm_package" file**
 
-3.  With the terminal navigated to the the _examples/docker_ folder, run the command:
+3.  With the terminal navigated to the _examples/docker_ folder, run the command:
 
 ```
 docker-compose -f docker-compose.yml up