updated electron backend, cleaning up codebase and adding comments for next iteration team. Added cloudbased.ts to modularize backend logic for AWS instances. Co-authored-by: Jon Cruz

<[email protected]>
Co-authored-by: Elena Atencio
<[email protected]>
Co-authored-by: Iris Wong
<[email protected]>
Co-authored-by: John Donato
<[email protected]>

Author: elenaatencio

README.md

@@ -23,6 +23,10 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 
 ## What's New?
 
+v10
+- User's account information and services can now be stored in MongoDB. To start connecting to user's database, please add in the URI in UserModel.ts. 
+
+
 - 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.

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/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,59 +21,32 @@ export const ApplicationContext = React.createContext<any>(null);
 const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props => {
   const children = props.children;
   const [servicesData, setServicesData] = useState([]);
-  const [serviceConnected, setServiceConnected] = useState<boolean>(false);
-  // 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');
     });
 
@@ -138,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,6 +1,5 @@
 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 {
@@ -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);
+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 connectToUserDB = async (URI: string) => {
-// 	console.log('connecting to user info db...')
-// 	return await mongoose.createConnection(URI);
-// }
 
 
 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;