Merge pull request #259 from oslabs-beta/master

v10 finalized version

Author: wiris316

README.md

@@ -23,38 +23,44 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 
 ## What's New?
 
+- Chronos is now able to work out of the box, addressing previous bugs that prevented Chronos to work as intended. File structure, dependencies, and webpack entry point have been updated, allowing Chronos Electron desktop application to run on multiple platforms. 
+- User's account information and services can now be stored and saved in MongoDB User database. 
+- Bug fixes and UI tweaks — Chronos is now a faster and more seamless experience than ever.
+- Updated step-by-step instructions to learn how to deploy local services such as dockerized containers, microservices, and gRPC examples, as well as monitor them using the chronosmicro/tracker npm package. 
+- Steamlined approach to access and dynamically displayed grafana dashboards for deployed EKS cluster (utilizing Prometheus data scraping and generated grafana dashboards) using the Grafana API. 
+
+Previously implemented updates:
 - Option to choose between cloud hosted services and local services, now 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.
 - A step-by-step instruction on setting up a new, functional EC2 instance, ECS cluster, and EKS cluster, ready to be monitored and tested by the app.
-- Bug fixes and UI tweaks — Chronos is now a more seamless experience than ever.
 
 ## Features
 
-- Distributed tracing enabled across microservices applications
-- Kubernetes monitoring via Prometheus server
-- Compatible with <img src="assets/graphql-logo-color.png" alt="GraphQL" title="GraphQL" align="center" height="20" /></a>
-- 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
-- Displays real-time temperature, speed, latency, and memory statistics
-- Display and compare multiple microservice metrics in a single graph
-- 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
-- Monitor a Kubernetes cluster via a Prometheus monitoring server
-- Monitor Amazon Web Services (AWS) instances and clusters <img src="assets/aws-logo-color.png" alt="AWS" title="AWS" align="center" height="20" /></a>
+- Cloud-Based Instances:
+    - Option to choose between cloud hosted services and local services, now giving Chronos the ability to monitor instances and clusters on AWS' EC2, ECS, and EKS platforms <img src="assets/aws-logo-color.png" alt="AWS" title="AWS" align="center" height="20" /></a>
+- Local Instances utilitizing @chronosmicro/tracker NPM package:
+    - Distributed tracing enabled across microservices applications
+    - Displays real-time temperature, speed, latency, and memory statistics for local services
+    - Display and compare multiple microservice metrics in a single graph
+    - Kubernetes monitoring via Prometheus server
+    - 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 9 release**.
+This is for the latest Chronos **version 10 release**.
 
 **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`
 
 <br>
 
-### Node Version
-
-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.
-
-<br>
+<!-- ### Node Version -->
+<!-- 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. -->
+<!-- <br> -->
 
 ### WSL2 Environment
 
@@ -79,8 +85,9 @@ export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"
 ### Running the Chronos Desktop App in Development Mode
 
 1. From the root directory, run `npm install`
-2. Open a terminal and run `npm run dev:app` to start the Webpack development server
-3. Open another terminal and run `npm run dev:electron` to start the Electron UI in development mode
+2. Run 'npm run build'
+3. Open a new terminal and run `npm run dev:app` to start the Webpack development server
+4. Open a new terminal and run `npm run dev:electron` to start the Electron UI in development mode
 
 ### Packing the Chronos App into an Executable
 

app/App.tsx

@@ -5,6 +5,7 @@ import './stylesheets/scrollBar.scss';
 
 
 // this is the fitness gram pacer test
+// React memo helps with rendering optimization. The components within React memo will only be rerendered if prompt has changed
 const App: React.FC = React.memo(() => {
   return (
     <div>

app/components/Login.tsx

@@ -14,7 +14,8 @@ const Login = React.memo(() => {
    * Function that will be called when the form button is clicked
    * It handles submitting the login information
    */
-
+  // v10: ipcRenderer returning a string with the response of user mode (light or dark).
+  // There is currently no redirection after failed login.
   const handleSubmit = (e: any) => {
     e.preventDefault();
     const inputFields: HTMLInputElement[] = e.currentTarget.querySelectorAll('input');
@@ -23,7 +24,9 @@ const Login = React.memo(() => {
     // eslint-disable-next-line no-return-assign
     // inputFields.forEach(input => (input.value = ''));
     const response: boolean | string = ipcRenderer.sendSync('login', { username, password });
-    if (typeof(response) === 'string') {
+    if (typeof (response) === 'string') {
+      console.log('Hi, login successful and response string (mode) is:', response);
+      console.log('Redirected to Occupied from Login.');
       setUser(username);
       setMode(response);
       navigate('/');

app/components/Occupied.tsx

@@ -55,9 +55,18 @@ interface StyleProps {
 }
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
+// type OccupiedProps = {
+//   switch: any;
+//   setSwitch: any;
+// };
+
+//v10: Memoized function, witouth any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
+  console.log('Hi, inside Occupied. Memoize function invoked');
+
   const { awsData, fetchAwsData, fetchAwsAppInfo, setLoadingState } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
+  // const { user, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
   const [serviceModalOpen, setServiceModalOpen] = useState<boolean>(false);
@@ -75,12 +84,16 @@ const Occupied = React.memo(() => {
   // const [showAwsContainer, setShowAwsContainer] = useState(false);
   const navigate = useNavigate();
 
+
   // Grab services and applications whenever the user changes
+  // v10: Runs once when Occupied is memoized, and subsequently when user is updated.
   useEffect(() => {
+    console.log('Hi, inside Occupied.ts useEffect function.');
     setServicesData([]);
     getApplications();
   }, [user]);
 
+
   // Dynamic refs
   const delRef = useRef<any>([]);
 
@@ -91,6 +104,8 @@ const Occupied = React.memo(() => {
   };
 
   // Handle clicks on Application cards
+  // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
+  // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
   const handleClick = (
     event: ClickEvent,
     selectedApp: string,

app/components/SignUp.tsx

@@ -9,7 +9,11 @@ const { ipcRenderer } = window.require('electron');
 const SignUp:React.FC = React.memo(() => {
   const navigate = useNavigate();
   const { setUser } = useContext(DashboardContext);
-  const [failedSignUp, setFailedSignUp] = useState<JSX.Element>(<>hey</>);
+  const [failedSignUp, setFailedSignUp] = useState<JSX.Element>(<></>);
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
 
   function handleSubmit(e: any) {
     e.preventDefault();
@@ -18,23 +22,37 @@ const SignUp:React.FC = React.memo(() => {
     const email = inputFields[1].value;
     const password = inputFields[2].value;
     const confirmPassword = inputFields[3].value;
+    // setUsername(inputFields[0].value);
+    // setEmail(inputFields[1].value);
+    // setPassword(inputFields[2].value);
+    // setConfirmPassword(inputFields[3].value);
+
+
 
     // eslint-disable-next-line no-return-assign
     inputFields.forEach(input => (input.value = ''));
 
+    if (!password) {
+      setFailedSignUp(<p>Please enter valid password</p>)
+      return;
+    }
     if (password !== confirmPassword) {
       setFailedSignUp(<p>Entered passwords do not match</p>);
       return;
     }
 
     ipcRenderer.invoke('addUser', { username, email, password})
-    .then(validSignUp => {
-      if (validSignUp) {
-      setUser(username);
-      navigate('/');
-    } else
-      setFailedSignUp(<p>Sorry, your sign up failed. Please try a different username or email</p>);
-    }).catch(error => {
+      .then((message) => {
+        console.log('message', message)
+        if (message === false) {
+          setFailedSignUp(<p>Sorry, your sign up failed. Please try a different username or email</p>)
+        } else {
+          console.log('in frontend', username)
+          // setUser(username);
+          navigate('/login');
+          alert('USER CREATED: PLEASE LOG IN')
+        }
+      }).catch(error => {
       console.error('Failed to sign up:', error);
       setFailedSignUp(<p>Sorry, your sign up failed. Please try again later</p>);
     });
@@ -49,13 +67,13 @@ const SignUp:React.FC = React.memo(() => {
 
         <form className="form" onSubmit={handleSubmit}>
           <label className="username">
-            <input type="text" name="username" id="username" placeholder="enter username" />
+            <input type="text" name="username" id="username" minLength={4} placeholder="enter username" />
           </label>
           <label className="email">
             <input type="email" name="email" id="email" placeholder="[email protected]" />
           </label>
           <label className="password">
-            <input type="password" name="password" id="password" placeholder="enter password" />
+            <input type="password" name="password" id="password" minLength={9} placeholder="enter password" />
           </label>
           <label className="passwordConfirm">
             <input type="password" name="passwordConfirm" id="passwordConfirm" placeholder="confirm password" />

app/components/Splash.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
+//Chronos logo when first starting the electron app. Has the picture for 4 seconds. 
 const Splash: React.FC = React.memo(props => {
   const [visible, setVisible] = useState(true);
 
   useEffect(() => {
-    setTimeout(() => setVisible(false), 4000);
+    setTimeout(() => setVisible(false), 1000);
   }, []);
 
   return (

app/containers/AWSGraphsContainer.tsx

@@ -125,13 +125,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
       )}
       {typeOfService === 'AWS/EKS' && (
         <div>
-          {/* <iframe src={`${awsUrl}/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe> */}
-          {/* <iframe src={`${awsUrl}/d/jPEGwyfVk/opencost?orgId=1&theme=light&kiosk`} width="1300" height="1300" ></iframe> */}
-
-          <iframe src={`http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe>
-          <iframe src={`http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/d/jPEGwyfVk/opencost?orgId=1&theme=light&kiosk`} width="1300" height="1300" ></iframe>
-
-          {/* <GrafanaIFrame {...awsAppInfo}/> */}
+           <iframe src={`${awsEksData}?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe>
         </div>
       )}
     </div>

app/containers/DashboardContainer.tsx

@@ -13,12 +13,22 @@ import AwsContextProvider from '../context/AwsContext';
 import '../stylesheets/Dashboard.scss';
 
 const DashboardContainer = React.memo(() => {
+
   const [visible, setVisible] = useState(false);
 
+  /**
+   * When DashBoard Container first mounted, visible is default to false, so that the Splash component can be stay visible.
+   * After 4 seconds, set the DashBoard Container visibility to true
+   */
   useEffect(() => {
     setTimeout(() => setVisible(true), 4000);
   }, []);
 
+  /**
+   * 1. Provide access to use ReactRouter
+   * 2. Provide access to serveral Context Providers (a.k.a Data Bank), including Application, Dashboard, Comms, Docker, Health, Event, Query, Aws
+   * 3. Child Component: SidebarContainer and MainContainer
+   */
   return (
     <>
       {visible && (

app/containers/GraphsContainer.tsx

@@ -156,7 +156,8 @@ const GraphsContainer: React.FC = React.memo(props => {
   };
 
   const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
-
+  console.log({GraphsContainer: selectedMetrics})
+  console.log({GraphsContainer: chart});
   return (
     <>
       <nav id="navigationBar">

app/containers/HealthContainer.tsx

@@ -51,8 +51,8 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
               const metric: string = Object.keys(serviceMetric)[0];
               const valueList = Object.values(serviceMetric)[0];
               const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
-              // console.log('valueList is', valueList); -> 50 values in an array
-              // console.log('newTimeList array is:', newTimeList); -> 50 values in an array
+              // console.log('valueList is', valueList); //-> 50 values in an array
+              // console.log('newTimeList array is:', newTimeList); //-> 50 values in an array
               if (selectedMetricsList.includes(metric)) {
                 const re = /_/g;
                 const newHealthChart = (