Merge pull request #377 from oslabs-beta/dev

v15.0 Release

Author: ashleybisram

.env.example

@@ -0,0 +1,3 @@
+# This is an example .env file for you to create in order to insert your private URI for /electron
+# Your .env file should live in the root directory for the current configuration used in UserModel.ts
+MONGO_URI='<MongoDB-URI-for-private-User-DB-here>'

README.md

@@ -20,31 +20,57 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 
 ## What's New?
 
-### Chronos 14.0
+### Chronos 15.0
 
 <div>
 
+Contributors:
+[Arnold Pinkhasov](https://github.com/apinkhasov101),
+[Ashley Bisram](https://github.com/ashleybisram),
+[Fridchard Chery](https://github.com/Gitfrich),
+[Peter Toussaint](https://github.com/Peter2oussaint)
+
+</div>
+Updates:
+<li>Improved runtime by incorporating esbuild-loader, removing deprecated syntax/unused node modules, and other bundling optimizations.</li>
+<li>Refactored SASS by updating deprecated syntax and import statements.</li>
+<li>Grafana dashboard updates include deprecated syntax removal and a more intuitive layout, making it simpler for users to visualize key metrics in the newest version of Grafana.</li>
+<li>TypeScript migration allows contributors and users to catch errors early and work with a more robust codebase, making the app more reliable.</li>
+<li>Introduced ChroNotes, full documentation of our file structure and their purposes.</li>
+<li>Refactored the UI of the app to give it a more intuitive appearance regarding where/how to initialize network monitoring.</li>
+
+
+<a href='(https://ashleybisram.medium.com/a-new-chapter-for-chronos-introducing-version-15-0-12b83def342b)'>Version 15.0 Medium Article</a>
+
+### **Iteration Log**
+<details><summary>Chronos 14.0</summary>
+    <ul>
+    <div>
+
+
 Contributors:
 [Michael Tagg](https://github.com/mdtagg),
 [Ted Pham](https://github.com/TedPham397),
 [Sofia Sarhiri](https://github.com/sarhiri),
-[Stephen Yang](https://github.com/stephenhyang),
+[Stephen Yang](https://github.com/stephenhyang)
 
 </div>
 Updates:
-<li>Implemented a new visualization button (example) to expedite data rendering processes.</li>
-<li>Refactored microservices example, switched over to community version of MongoDB for easier URI implementation.</li>
-<li>Modularized cluttered components into modular units to improve code readability and reusability.</li>
-<li>Optimized startup scripts to reduce application load time and streamline environment configuration.</li>
-<li>Upgraded Material-UI from version 4 to version 5, adapting to new API changes and improving UI responsiveness. </li>
-<li>Refactored portions of the electron app </li>
-<li>Refactored data parsing logic to reduce unnecessary rerenders and improve app performance</li>
-<li>Fixed data bottle necks in the local npm packages, data is now able to flow to microservices for data visualization</li>
-
+    <ul>
+    <li>Implemented a new visualization button (example) to expedite data rendering processes.</li>
+    <li>Refactored microservices example, switched over to community version of MongoDB for easier URI implementation.</li>
+    <li>Modularized cluttered components into modular units to improve code readability and reusability.</li>
+    <li>Optimized startup scripts to reduce application load time and streamline environment configuration.</li>
+    <li>Upgraded Material-UI from version 4 to version 5, adapting to new API changes and improving UI responsiveness. </li>
+    <li>Refactored portions of the electron app </li>
+    <li>Refactored data parsing logic to reduce unnecessary rerenders and improve app performance</li>
+    <li>Fixed data bottle necks in the local npm packages, data is now able to flow to microservices for data visualization</li>
+    </ul>
 
-<a href='link here'>Version 14.0 Medium Article</a>
+<a href='https://medium.com/@m.sofiasarhiri/a-tale-as-old-as-time-for-the-modern-developer-chronos-v-14-f84733fd4f93'>Version 14.0 Medium Article</a>
 
-### **Iteration Log**
+</ul>
+</details>
 
 <details><summary>Chronos 13.0</summary>
     <ul>
@@ -216,7 +242,7 @@ Updates:
 </ul>
 </details>
 
-### With Chronos 14.0
+### With Chronos 15.0
 
 <a href="https://chronoslany.com/">
     <img src="assets/demo.gif" alt="Chronos" title="Chronos" align="center" height="500" width="auto" />
@@ -226,10 +252,14 @@ Updates:
 
 ## Overview of the CodeBase
 
+- In our ChroNotes, we have a full overview of all the files in the codebase, and their purpose.
+<a href='https://docs.google.com/document/d/e/2PACX-1vTWIX6Is3uuvWX73ab5K521X7Ddr_fVN64F82bJ8l4VNF45cM9PbfDj2gVV9MVi_HhDrbNmZK51-dHP/pub'>Click here to view</a>!
+<img src='./assets/ChroNotes.png' alt='ChroNotes screenshot' align='center' height='500'/>
 - If you want to visualize the way the files in the app are connected, we suggest using this data visualizer. Below, it's showing the same repository, but instead of a directory structure, each file and folder as a circle: the circle’s color is the type of file, and the circle’s size represents the size of the file. See live demo
   <a href='https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=oslabs-beta%2FChronos'>here</a>.
   <img src="assets/codebase_visulization.png" alt="codebase visulization" align="center" height="500"/>
 
+
 ## Features
 
 - Cloud-Based Instances:
@@ -245,7 +275,7 @@ Updates:
 
 # Installation
 
-This is for the latest Chronos **version 13.0 release**.
+This is for the latest Chronos **version 15.0 release**.
 
 ## NPM Package
 
@@ -310,7 +340,7 @@ export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"
 
 **NOTE: You must create your own user database for extended features**
 
-1. Create a MongoDB database in which to store user information and insert it on line 2 within the [UserModel.ts](./electron/models/UserModel.ts) (_electron/models/UserModel.ts_) file.
+1. Create a MongoDB database in which to store user information and insert it within a root .env file based on .env.example [.env.example](./.env.example) (_.env.example_) file.
    - This database will privately store user information.
 2. Once this is set up, you can create new users, log in, and have your data persist between sessions.
 

__backend-tests__/chronosMethods.test.js

@@ -1,5 +1,5 @@
 const { EcoTwoTone } = require('@mui/icons-material');
-const Chronos = require('../chronos_npm_package/chronos.js');
+const Chronos = require('../chronos_npm_package/chronos.ts');
 const helpers = require('../chronos_npm_package/controllers/utilities.js');
 const hpropagate = require('hpropagate');
 const mongo = require('../chronos_npm_package/controllers/mongo.js');

app/charts/GrafanaEventChart/styles.scss

@@ -1,3 +1,5 @@
+
+
 #graphType {
     min-width: 100px;
     height: 25px;

app/components/About/About.tsx

@@ -13,15 +13,14 @@ const About: React.FC = React.memo(() => {
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
   const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
-
-    
-    <div className="about" >
+    <div className="about">
       <div className="blurb" data-testid="aboutPage" style={currentStyle}>
-        <h3 style={currentStyle} className="mainTitle">About</h3>
-        <p style={currentStyle} className="text" >
-          The Chronos Team has a passion for building tools that are powerful, beautifully
-          designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer
-          community. It can also monitor applications deployed using AWS, EC2, and ECS from Amazon.
+        <h3 style={currentStyle} className="mainTitle">About </h3>
+        <p style={currentStyle} className="text">
+          The Chronos Team has a passion for building tools that are powerful, beautifully designed,
+          and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits
+          the developer community. It can also monitor applications deployed using AWS, EC2, and ECS
+          from Amazon.
         </p>
         <br></br>
         <TeamMembers />
@@ -31,4 +30,4 @@ const About: React.FC = React.memo(() => {
   );
 });
 
-export default About;
+export default About;

app/components/About/PastContributors.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStylingContext } from './StylingContext';
 
 const contributors = [
-  'Haoyu', 'Eisha', 'Edwin', 'Tyler', 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
+  'Mike', 'Stephen', 'Ted', 'Sofia', 'Haoyu', 'Eisha', 'Edwin', 'Tyler', 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
   'Matt', 'Derek', 'Kit', 'Grace', 'Jen', 'Patty', 'Stella', 'Michael', 'Ronelle', 'Todd',
   'Greg', 'Brianna', 'Brian', 'Alon', 'Alan', 'Ousman', 'Ben', 'Chris', 'Jenae', 'Tim',
   'Kirk', 'Jess', 'William', 'Alexander', 'Elisa', 'Josh', 'Troy', 'Gahl', 'Brisa', 'Kelsi', 

app/components/About/TeamMembers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStylingContext } from './StylingContext';
 
-const names = ['Mike', 'Stephen', 'Ted', 'Sofia'];
+const names = ['Arnold', 'Ashley', 'Pete', 'Rich'];
 
 const TeamMembers: React.FC = () => {
   const currentMode = useStylingContext();

app/components/About/styles.scss

@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *; // @use '../../index' as index;
 
 .about {
   min-width: 421px;
@@ -9,31 +9,39 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  padding: 0;
+
 }
 
 .sprout {
   margin: 0;
+  
 }
 
 .mainTitle {
   font-size: 36px;
   color: $background;
   text-align: left;
   font-weight: 600;
+    margin: 0;
 }
 
 .title {
   font-size: 18px;
   color: $background;
   text-align: left;
   font-weight: 600;
+  padding: 0;
+  margin: 0;
 }
 
 .text {
   font-size: 20px;
   color: $background;
   text-align: left;
   font-weight: 300;
+  padding: 0;
+  margin: 0;
 }
 
 .blurb {
@@ -46,7 +54,7 @@
   border: none;
   box-shadow: $boxshadow2;
   padding: 30px;
-
+  margin: 0;
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
@@ -63,13 +71,19 @@
   background-color: transparent;
   border-radius: 50%;
   background-size: scale-down;
+  padding: 0;
+  margin: 0;
   &:hover {
     background-color: $hover;
     opacity: 0.85;
     animation: none;
   }
 }
-
+#OSPNames p{
+  margin: 10px 0px;
+}
 p {
   padding-left: 10px;
+  margin: 0;
+  // border:2px green solid;
 }

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -26,7 +26,7 @@ const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
         key={`card-${i}`}
         className={classes.paper}
         variant="outlined"
-        onClick={() => handleClick(application[0], application[3], i)}
+         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
           <div className="databaseIconHeader"></div>

app/components/ApplicationsCard/styles.scss

@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .card {
   display: flex;
@@ -8,7 +8,7 @@
   padding: 0;
   cursor: pointer;
   transition: all 0.5s;
-
+// border: 2px solid green;
   &:after,
   &:before {
     content: ' ';

app/components/Contact/styles.scss

@@ -1,4 +1,4 @@
-@import '../../index.scss';
+@use '../../index' as *;
 
 .contact {
   display: flex;
@@ -10,13 +10,13 @@
   justify-items: center;
   top: 0;
   left: 0;
+  height: auto;
   min-height: 100vh;
   opacity: 1;
   vertical-align: top;
   justify-content: center;
   align-items: center;
   color: $background;
-  
 }
 .contact-border {
   display: flex;
@@ -167,6 +167,12 @@ input[type='file'] {
   }
 }
 
-.contact-blurb p{
+.contact-blurb p {
+  margin: 0;
   font-weight: 300;
-}
+
+}
+.contact-blurb h1 {
+  margin: 0;
+  padding: 0;
+}

app/components/DashboardIcons/styles.scss

@@ -1,7 +1,8 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
 
 .dashboardIconWrapper {
   margin-right: 37px;
+
 }
 
 .dashboardIconArea {
@@ -25,6 +26,7 @@
   z-index: 1;
   top: 50px;
   right: -14px;
+
 }
 
 .dashboardIconArea .dashboardTooltip::after {
@@ -134,6 +136,7 @@
 .personIconArea {
   position: relative;
   display: inline-block;
+
 }
 
 .personIconArea:hover .personTooltip {

app/components/FirstLaunch/styles.scss

@@ -7,6 +7,7 @@
 
 .home {
   background: $darkblue;
+
   display: flex;
   flex-direction: column;
   align-content: center;

app/components/Header/styles.scss

@@ -1,4 +1,5 @@
-@import '../../index.scss';
+@use '../../index.scss' as *;
+
 .microservice-header {
   width: 100%;
   @include centerWithFlex(center);