Merge pull request #90 from oslabs-beta/master

Chronos 7.0

Author: J-DannyMartinez

README.md

@@ -45,15 +45,12 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 ## <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
+  - Developed search bar functionality to filter displayed microservices
+  - Login system for user authentication
+  - Any errored connections will now show on the bell icon
+  - Notification bell will update in real time
 - 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
-
+  - Fixed database icons to show the correct icon
 ## Features 
 
 - Distributed tracing enabled across microservices applications
@@ -80,15 +77,15 @@ This is for the latest Chronos version **5.1 release and later**.
 - 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. 
+Make sure you're running version 14.16.1 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. 
 
-If you need to roll back from <a href="#"><img src="./app/assets/node-logo-color.png" alt="Node" title="Node" align="center" height="20" /></a> 14.9.0, make sure to run 
+If you need to roll back from <a href="#"><img src="./app/assets/node-logo-color.png" alt="Node" title="Node" align="center" height="20" /></a> 16.1.0, make sure to run 
 ```npm rebuild```
 in the root directory.
 
 If you're installing Chronos into a microservices application, and you have different folders for each microservice, make sure you also run 
 ```npm rebuild```
-in each microservices folder **after you roll back to version 12.18.3.**
+in each microservices folder **after you roll back to version 14.16.1.**
 <br>
 
 ### Install Dependencies

app/charts/RequestTypesChart.tsx

@@ -31,14 +31,14 @@ const RequestTypesChart: React.FC = React.memo(() => {
     let type;
     commsData.forEach((obj: IObject) => {
       type = obj.request;
-      console.log('L34:', type);
+      // console.log('L34:', type);
       if (type in requestTypes) {
         requestTypes[type] += 1;
       } else {
         requestTypes[type] = 0;
         requestTypes[type]++;
       }
-      console.log(requestTypes)
+      // console.log(requestTypes)
     });
 
     return (
@@ -53,7 +53,6 @@ const RequestTypesChart: React.FC = React.memo(() => {
             marker: {
               colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
             },
-            
           },
         ]}
         config={{
@@ -78,7 +77,7 @@ const RequestTypesChart: React.FC = React.memo(() => {
             x: 0.5,
             font: {
               size: 7,
-            }
+            },
           },
         }}
       />

app/charts/ResponseCodesChart.tsx

@@ -14,7 +14,7 @@ interface IObj {
 }
 
 type responseCodes = {
-  [key: string]: number
+  [key: string]: number;
 };
 
 const ResponseCodesChart: React.FC = React.memo(() => {
@@ -65,7 +65,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
       }
     });
 
-    console.log(responseCodes);
+    // console.log(responseCodes);
 
     return (
       <Plot
@@ -126,7 +126,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
             x: 0.5,
             font: {
               size: 7,
-            }
+            },
           },
         }}
       />

app/charts/RouteChart.jsx

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
-import { CommsContext } from '../context/CommsContext';
 import Graph from 'react-graph-vis';
+import { CommsContext } from '../context/CommsContext';
 
 const RouteChart = React.memo(() => {
   const communicationsData = useContext(CommsContext).commsData;
@@ -26,10 +26,10 @@ const RouteChart = React.memo(() => {
       resObj[element.correlatingid].push({
         microservice: element.microservice,
         time: element.time,
-        request: element.request, //here
+        request: element.request, // here
       });
     }
-    //? What does this else block do?
+    // ? What does this else block do?
   } else {
     for (let i = communicationsData.length - 1; i >= 0; i--) {
       const element = communicationsData[i];
@@ -49,7 +49,6 @@ const RouteChart = React.memo(() => {
     }
   }
 
-
   // Filter the array so that only subarrays w/ len > 1 are kept.
   // (len == 1 means there's only one point in the route. There's no meaningful data to be gained from those.)
   const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
@@ -72,26 +71,26 @@ const RouteChart = React.memo(() => {
   // ======Graphs logic =======//
   const nodeListObj = {};
   const edgeListObj = {};
-  for (let route of tracePoints) {
+  for (const route of tracePoints) {
     for (let i = 0; i < route.length; i += 1) {
       // check if node exists if not then add node
-      let id = route[i].microservice;
+      const id = route[i].microservice;
       if (nodeListObj[id] === undefined) {
-        nodeListObj[id] = { 
-          id: id, 
-          label: id
-        }
+        nodeListObj[id] = {
+          id,
+          label: id,
+        };
       }
       // add edge from node to node (repeat til end)
       if (i !== 0) {
-        let from = route[i - 1].microservice;
-        let to = id;
-        let request = route[i - 1].request; //here
-        let edgeStr = JSON.stringify({ from, to, request })
+        const from = route[i - 1].microservice;
+        const to = id;
+        const { request } = route[i - 1]; // here
+        const edgeStr = JSON.stringify({ from, to, request });
         let duration = new Date(route[i].time) - new Date(route[i - 1].time);
         // only want one edge per route with the average duration
         if (edgeListObj[edgeStr]) {
-          //? wrong math
+          // ? wrong math
           duration = (duration + edgeListObj[edgeStr]) / 2;
         }
         edgeListObj[edgeStr] = duration;
@@ -102,10 +101,12 @@ const RouteChart = React.memo(() => {
   // turn objects into valid arrays to input into graph
   const nodeList = Object.values(nodeListObj);
   const edgeList = [];
-  for (let [edgeStr, duration] of Object.entries(edgeListObj)) {
+  for (const [edgeStr, duration] of Object.entries(edgeListObj)) {
     const edge = JSON.parse(edgeStr);
-    console.log(edge.request)
-    edge.label = edge.request ? `${edge.request} - ${(duration * 10).toFixed(0)} ms` : `${(duration * 10).toFixed(0)} ms` 
+    // console.log(edge.request)
+    edge.label = edge.request
+      ? `${edge.request} - ${(duration * 10).toFixed(0)} ms`
+      : `${(duration * 10).toFixed(0)} ms`;
     edgeList.push(edge);
   }
 
@@ -120,12 +121,12 @@ const RouteChart = React.memo(() => {
       hierarchical: false,
     },
     edges: {
-      color: "#444d56",
+      color: '#444d56',
       physics: true,
       smooth: {
-        type: "curvedCCW",
-        forceDirection: "none",
-        roundness: 0.3
+        type: 'curvedCCW',
+        forceDirection: 'none',
+        roundness: 0.3,
       },
       font: {
         color: '#444d56',
@@ -141,27 +142,38 @@ const RouteChart = React.memo(() => {
         },
         highlight: {
           background: '#fc4039',
-        }
+        },
       },
       shape: 'circle',
       font: {
         color: '#ffffff',
         size: 10,
-        face: 'roboto'
+        face: 'roboto',
       },
-    }
-  }
+    },
+  };
 
   const events = {
-    select: function (event) {
-      let { nodes, edges } = event;
+    select(event) {
+      const { nodes, edges } = event;
     },
   };
 
   return (
-    <div className='traceContainer'>
-      <span id='tracesTitle'>Route Traces</span>
-      <Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontFamily: 'Roboto', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
+    <div className="traceContainer">
+      <span id="tracesTitle">Route Traces</span>
+      <Graph
+        className={classes.paper}
+        graph={graph}
+        options={options}
+        events={events}
+        style={{
+          fontFamily: 'Roboto',
+          boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)',
+          backgroundColor: 'white',
+          borderRadius: '3px',
+        }}
+      />
     </div>
   );
 });

app/components/Home.tsx

@@ -1,17 +1,92 @@
-import React from 'react';
+import { faGlassMartiniAlt } from '@fortawesome/free-solid-svg-icons';
+// import axios from 'axios';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import '../stylesheets/Home.scss';
+//
+const { ipcRenderer } = window.require('electron');
+
+interface PersonProps {
+  email: string;
+  password: string;
+}
+
+type ClickEvent = React.MouseEvent<HTMLElement>;
+
+// const [email] = React.useState<string>('');
+// const [password] = React.useState<string>('');
+// function handleChange(e) {
+
+// }
+const adminUser = {
+  email:  "[email protected]",
+  password: "admin123"
+}
 
 const Home = React.memo(function Home(props) {
+const [open, setOpen] = useState<boolean>(false);
+const [loginInfo, setLoginInfo] = React.useState<PersonProps>({
+  email: '',
+  password: ''
+});
+
+function myFunction() {
+  location.replace("/applications")
+}
+function pageRedirect(){
+  setTimeout(function(){
+    window.location.href = '/applications';
+ }, 5000);
+ }
+
+function submitLogin(e: any) {
+  e.preventDefault();
+// console.log(e);
+  console.log(loginInfo);
+  //check local state if the username is there
+   if(loginInfo.email === adminUser.email && loginInfo.password === adminUser.password){
+     console.log("Logged In");
+     myFunction();
+    // alert('Welcome Back!\n\n (\\__/) \n (=\'.\'=) \n(\'\')__(\'\')')
+    // //  pageRedirect();
+    // //  "window.location='/applications'"
+   } else {
+     alert('Log In credentials are wrong!\n\n (\\__/) \n (=\'.\'=) \n(\'\')__(\'\')')
+    }
+  }
+//database connection/fetch
+function checkLoginStatus() {
+  // axios('http://localhost:3000/loggedIn', {withCredentials: true})
+}
+
+
+
   return (
     <div className="home">
-      <p className="welcomeMessage">Your all-in-one application monitoring tool</p>
-      <Link className="link" to="/applications">
+      <p className="welcomeMessage">Welcome Back To Chronos! Your all-in-one application monitoring tool</p>
+      
+      <form className="form" onSubmit={submitLogin}>
+              <label className="login">
+                <input type="email" name="email" id="email" placeholder="[email protected]" onChange={e => setLoginInfo({...loginInfo, email: e.target.value})} ></input>
+                <br></br>
+                <input type="password" name= "password" id="password" placeholder="enter password" onChange={e => setLoginInfo({...loginInfo, password:e.target.value})} ></input>
+                <hr />
+              </label>
+              <br></br>
+              <br></br>
+              <br></br>
+            <button className="link"  id="submitBtn" type="submit" onClick={() => (true)}>
+                Log In
+              </button>
+            </form>
+
+       <br></br>
+      {/* <Link className="link" to="/applications">
         Get Started
-      </Link>
+      </Link> */}
     </div>
   );
 });
 
-export default Home;
+export default Home;