Merge pull request #15 from oslabs-beta/elena/updatingToDB

Elena/updating to db

Author: elenaatencio

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/components/Occupied.tsx

@@ -121,14 +121,9 @@ const Occupied = React.memo(() => {
         selectedService === 'AWS/EKS'
       ) {
         setAppIndex(i);
-        // setApp is never invoked, function is not established?
         setApp(selectedApp);
         navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
       } else {
-        console.log('In handleClick Method (local) in Occupied.tsx');
-        console.log('The following are the new values for appIndex, app, servicesData, and serviceModalOpen:');
-        console.log(i, ' ', selectedApp, ' ', 'N/A ', serviceModalOpen );
-      
         setAppIndex(i);
         setApp(selectedApp);
         setServicesData([]);

app/components/SignUp.tsx

@@ -9,7 +9,7 @@ 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('');

app/context/ApplicationContext.tsx

@@ -9,6 +9,7 @@ const { ipcRenderer } = window.require('electron');
  * @property  {Array} servicesData The microservices of that application
  * @method    fetchServicesNames
  * @method    connectToDB
+ * @method    getSavedMetrics
  */
 
 interface AppContextProps {
@@ -20,60 +21,35 @@ export const ApplicationContext = React.createContext<any>(null);
 const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props => {
   const children = props.children;
   const [servicesData, setServicesData] = useState([]);
-  // v10 note: there is not function for setApp so app is never updated.
   const [app, setApp] = useState<string>('');
   const [savedMetrics, setSavedMetrics] = useState({});
   const [appIndex, setAppIndex] = useState<number>(0);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
 
-  /**
- * @function tryParseJson - a function that will parse the JSON data into an object. If there is any error during parsing (a.k.a there is a circular inside the JSON data), console log the error
- * @param jsonString - JSON data that is received from backend
- * @return an object with all information from backend
- */
-  function tryParseJSON(jsonString: string) {
-    try {
-      const o = JSON.parse(jsonString);
-
-      if (o && typeof o === 'object') {
-        return o;
-      }
-    } catch (e) {
-      console.log({ error: e });
-    }
-    return false;
-  }
 
   /**
    * @function fetchServicesNames - a function that will take an application name and update the state of `serviceData` based on backend response
    * 1. Take in an application name
-   * 
    * 2. Send a `servicesRequest` to backend
-   * 
    * 3. Upon `servicesResponse`, parse the received JSON data and assign it to `servicesData`
-   * 
    * 4. Remove the listener for `servicesResponse`
    * @param application - application name
    */  
   // v10: Invoked by connectToDB, passing in app (card title)
   const fetchServicesNames = useCallback((application: string) => {
-    console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
-    console.log('app when fetch services name: ', application);
-    // setApp(application);
-
+    // console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
+    // console.log('app when fetch services name: ', application);
     ipcRenderer.send('servicesRequest');
-
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       let result: any;
-      // Parse JSON data into object
-      // if (tryParseJSON(data)) result = JSON.parse(data);
       result = JSON.parse(data);
-      console.log('result from ipcrenderer services response is: ', result);
-      console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData);
+      // console.log('result from ipcrenderer services response is: ', result);
+      // console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData);
       setServicesData(result);
-      console.log('Leaving fetchedServicesNames function.');
+      // console.log('Leaving fetchedServicesNames function.');
       ipcRenderer.removeAllListeners('servicesResponse');
     });
+
   }, []);
 
     /**
@@ -88,7 +64,11 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {
-      fetchServicesNames(application);
+      if(data === true) {
+        fetchServicesNames(application);
+      } else {
+        alert('Database connection is not valid.');
+      }
     });
   }, []);
 
@@ -132,3 +112,22 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
 });
 
 export default ApplicationContextProvider;
+
+
+//   /**
+//  * @function tryParseJson - a function that will parse the JSON data into an object. If there is any error during parsing (a.k.a there is a circular inside the JSON data), console log the error
+//  * @param jsonString - JSON data that is received from backend
+//  * @return an object with all information from backend
+//  */
+//   function tryParseJSON(jsonString: string) {
+//     try {
+//       const o = JSON.parse(jsonString);
+
+//       if (o && typeof o === 'object') {
+//         return o;
+//       }
+//     } catch (e) {
+//       console.log({ error: e });
+//     }
+//     return false;
+//   }

app/modals/ServicesModal.tsx

@@ -24,9 +24,6 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   console.log('ServicesModal current props (index, app): ', i, ' ', app);
 
   const { user, applications } = useContext(DashboardContext);
-  console.log('user from Dashboard Context:', user);
-  console.log('applications from Dashboard Context: ', applications);
-  console.log('applications[i][2]: ', applications[i][2]);
   const { servicesData, connectToDB } = useContext(ApplicationContext);
   const [services, setServices] = useState<Array<string>>([]);
 
@@ -45,8 +42,6 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   // adding database type to make connection and fetchServiceNames more efficient
   useEffect(() => {
     console.log('Hi, inside useEffect in ServicesModal. Calling connectToDB function.');
-    console.log("Passing the following parameters for user, i, app, applications, ");
-    console.log(user, ' ', i, ' ', app, ' ', applications, applications[i][1]);
     connectToDB(user, i, app, applications[i][2], applications[i][1]);
   }, [i]);
 

electron/Main.ts

@@ -2,6 +2,7 @@ import { app, BrowserWindow, ipcMain } from 'electron';
 import './routes/dashboard';
 import { clearGuestSettings } from './routes/dashboard';
 import './routes/data';
+import './routes/cloudbased';
 import path from 'path';
 
 // Declare variable to be used as the application window

electron/databases/mongo.ts

@@ -1,10 +1,9 @@
 import mongoose from 'mongoose';
 // import { MongoError } from 'mongodb';
-const testURL = 'mongodb+srv://seconddbtest:[email protected]/?retryWrites=true&w=majority';
 // Mongoose connection wrapped in function that takes the index of the selected database as the parameter. This index is used to target the correct database for querying.
 const connectMongoose = async (i:number, URI: string) => {
   try {
-    // await mongoose.connection.close();
+    await mongoose.connection.close();
     const db = await mongoose.connect(URI);
 
     return db;
@@ -13,14 +12,4 @@ const connectMongoose = async (i:number, URI: string) => {
   }
 };
 
-// const connectMongoose = async (i: number, URI: string) => {
-//   try {
-//     const db2 = mongoose.createConnection(testURL);
-//     console.log('connection to user provided db established..');
-//     return db2;
-//   } catch (error) {
-//     console.log('Error connecting to second db... ', error);
-//   }
-// }
-
 export default connectMongoose;

electron/models/UserModel.ts

@@ -1,33 +1,24 @@
+// INSERT URI TO MONGODB TO SET UP USER DATABASE
 const MONGO_URI = 'mongodb+srv://seconddbtest:[email protected]/?retryWrites=true&w=majority';
-// import mongoose, { Schema, Document } from 'mongoose';
-
-// export interface IService extends Document {
-//   microservice: string;
-//   interval: number;
-// }
 const mongoose = require('mongoose')
 
-const db2 = mongoose.createConnection(MONGO_URI);
-console.log('establishing connection to database');
-// const connectToUserDB = async (URI: string) => {
-// 	console.log('connecting to user info db...')
-// 	return await mongoose.createConnection(URI);
-// }
+const db2 = mongoose.createConnection(MONGO_URI)
+// .then(() => {
+// 	console.log('Connected to User database...');
+// })
+// .catch(err => {
+// 	console.log('Error connecting to User database: ', err);
+// })
+// console.log('establishing connection to database');
 
 
 const userSchema = new mongoose.Schema({
-	// User: {
 		username: {type: String, required:true, unique: true},
 		password: {type: String, required:true},
 		email: String,
     services: [],
     mode: {type: String, default: 'light'}
-	// },
 });
 
-// export default mongoose.model<IService>('services', ServicesSchema);
-
-// export default mongoose.model('User', userSchema);
 const UserModel = db2.model('users', userSchema);
-
 module.exports = UserModel;