user settings conflict resolved

Author: robicano22

Main.js

@@ -85,7 +85,7 @@ app.on('activate', () => {
 // Fired by the useEffect hook inside of the Splash.jsx component, this message route will toggle
 // splash property inside of settings.json to false once the Splash page renders itself just once
 ipcMain.on('toggleSplash', (message) => {
-  console.log('toggleSplash message received');
+  //console.log('toggleSplash message received');
   const state = JSON.parse(
     // read json from settings.json
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
@@ -102,7 +102,7 @@ ipcMain.on('toggleSplash', (message) => {
 });
 
 ipcMain.on('checkSplash', (message) => {
-  console.log('checkSplash message received');
+  //sconsole.log('checkSplash message received');
   const state = JSON.parse(
     // read json from settings.json
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
@@ -116,7 +116,7 @@ ipcMain.on('checkSplash', (message) => {
 // Load settings JSON and returns current setup status back to the render process.
 // ipc 'setup' route -->  Ousman
 ipcMain.on('setup', (message) => {
-  console.log('setup message received');
+  //console.log('setup message received');
   // assigns state to the returned the object returned from settings.json -->  Ousman
   const state = JSON.parse(
     // read json from settings.json
@@ -133,30 +133,31 @@ ipcMain.on('setup', (message) => {
 // Loads existing settings JSON and update settings to include new services entered by the user.
 // on ipc 'submit' request --> Ousman
 ipcMain.on('submit', (message, newService) => {
-  // assigning state to the parsed return of setting
+  // Declares a variable state and initialize it to the returned parsed json object from the user/settings.json file
   const state = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
       encoding: 'UTF-8',
     }),
   );
-  //  if statement is used to replace hard coded data. Hard coded data and the michelleWasHere key is needed to avoid a load error caused by Electron querying the database before a user has added or selected a database.
 
-  //* ** What is happening here --> Ousman */
+  // Checks if setup is required by checking if the value for the state key 'setupRequired' is true 
   if (state.setupRequired) {
+    // If setup is required, the value for key 'setupRequired' is reassign to false and the value for key 'services' is reassign to an array with newService as its only element
     state.setupRequired = false;
     state.services = [JSON.parse(newService)];
-    fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
   } else {
-    state.setupRequired = false;
+    // Else the newService is pushed into the services array
     state.services.push(JSON.parse(newService));
-    fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
-  }
+  } 
+
+  // Rewrites user/settings.json to show state
+  fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
 });
 
 // Load settings JSON and returns updated state back to the render process.
 // on ipc 'dashboard' request --> Ousman
 ipcMain.on('dashboard', (message) => {
-  // assign state to the parsed return of setting --> Ousman
+  // Declares a variable state and initialize it to the returned parse json object from the user/settings.json file
   const state = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
       encoding: 'UTF-8',
@@ -171,24 +172,29 @@ ipcMain.on('dashboard', (message) => {
   message.returnValue = dashboardList;
 });
 
-// ipc 'deleteService' route
+// Deletes the service at position 'index' from the services array within the user/setting.json file,
+// resets the user/setting.json file to what it was originally if all of the services are deleted,
+// and sends the remaining services back to onDelete function within DeleteService as a response
 ipcMain.on('deleteService', (message, index) => {
-  // assigns state to the returned the object returned from settings.json
+  // Declares a variable state and initialize it to the returned parse json object from the user/settings.json file
   let state = JSON.parse(
-    // read json from settings.json
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), {
       encoding: 'UTF-8',
     }),
   );
+
+  // Send a response back with the updated services
   const { splash } = state;
-  // updating the services
+// Checks if there is more than one services in the services array
   if (state.services.length > 1) {
+       // If true, removes the service at position 'index'
     state.services.splice(index, 1);
   } else {
+      // Else reassign state to what the user/setting.json file was originally before any database was save
     state = { setupRequired: true, services: ['hard', 'coded', 'in'], splash };
   }
 
-  // write json from settings.json
+  // Rewrites json from settings.json
   fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state), { encoding: 'UTF-8' });
   message.sender.send('deleteResponse', state.services);
 });

app/charts/microservice-traffic.jsx

@@ -29,7 +29,6 @@ const MicroServiceTraffic = (props) => {
   }
 
   else {
-  
     for (let i = communicationsData.length-1; i >= 0; i--) {
       const element = communicationsData[i];
       if (resObj[element.correlatingid]) resObj[element.correlatingid].push(element.currentmicroservice);
@@ -40,26 +39,30 @@ const MicroServiceTraffic = (props) => {
 
   //use object values to destructure locations
   const tracePoints = Object.values(resObj);
-  let position = communicationsData[0].correlatingid ? 0 : tracePoints.length-1;
- 
+
   // Declare Micro-server-count dictinary to capture the amount of times a particular server is hit
   const microServiceCountdictionary  = {};
 
+  //array logging every ping present in communications table ---> flat used to flatten multidimensional array and return 1d array
+  const tracePointLog = tracePoints.flat(Infinity);
+
   // iterate over Trace Points
-  for (let i = 0; i < tracePoints[position].length; i+=1) {
+  for (let i = 0; i < tracePointLog.length; i+=1) {
 
     // populate Micro-count dictionary
-    if (!microServiceCountdictionary[tracePoints[position][i]]) {
-      microServiceCountdictionary[tracePoints[position][i]] = 1;
+    if (!microServiceCountdictionary[tracePointLog[i]]) {
+      microServiceCountdictionary[tracePointLog[i]] = 1;
     } else {
-      microServiceCountdictionary[tracePoints[position][i]]+=1
+      microServiceCountdictionary[tracePointLog[i]]+=1
     }
   };
 
   // capture values of microServiceCountdictionary to use as data to populate chart object
   const serverPingCount = Object.values(microServiceCountdictionary);
 
-  
+  // variable 10 points higher than max number in microservicesDictionary aggregation --> variable allows for top level spacing on bar graph
+  const yAxisHeadRoom = (Math.max(...serverPingCount) + 10);
+
   // Create chart object data to feed into bar component 
   const myChart = {
     //spread dictionary keys inorder to properly label chart x axis 
@@ -70,9 +73,9 @@ const MicroServiceTraffic = (props) => {
           backgroundColor: 'rgba(241, 207, 70,1)',
           borderColor: 'rgba(0,0,0,1)',
           borderWidth: 1,
-          data: [...serverPingCount, 0] // spread ping count array into data array to have chart populate the Y axis
+          data: [...serverPingCount, 0, yAxisHeadRoom] // spread ping count array into data array to have chart populate the Y axis
         }
-      ]
+      ],
   }
 
 

app/components/DeleteService.jsx

@@ -2,43 +2,48 @@ import React, { useContext } from 'react';
 import DashboardContext from '../context/DashboardContext';
 import SetupContext from '../context/SetupContext';
 
-
+// Declare a constant ipcRenderer by deconstructing window.require('electron') so that the onDelete function can initialize an IPC Communication 
 const { ipcRenderer } = window.require('electron');
 
 
+// Deletes a Service
 const DeleteService = (props) => {
-  console.log('in the DeleteService')
-  
-  // Used to toggle setup required if user wants delete all of the databases and the user needs to be sent to the front page.
+  // Declares a constant setup and initialize it to the SetupContext. 
+  // SetupContext indicates whether or not an initial setup is necessary.
+  // An initial setup is necessary when the user has not saved any database to chronos frontend application.   
   const setup = useContext(SetupContext);
 
-  // List of the databases saved by users to track microservices. 
+  // Declares a variable serviceList and initialize it to the DashboardContext. 
+  // DashboardContext lists the databases saved by users. 
   let serviceList = useContext(DashboardContext);
 
-  // Only happens when a DB button is clicked
+  /* 
+   Sends a deleteService request with an index to an ipcMain.on function within the Main.js 
+   On return, the function reassigns the serviceList variable to the updated services provided within the deleteResponse. If the serviceList equals ["hard","coded","in"], then the user has no database saved to the chronos frontend application. If this is true, the function reassigns setup.setupRequired to true by invoking setup.toggleSetup with the argument 'false'. Then the function reloads the application to show the changes made to the services.
+  */
   const onDelete= (index) => {
-    // IPC communication used to delete the button pressed.
     ipcRenderer.send('deleteService', index);
     ipcRenderer.on('deleteResponse', (event, services) => {
         serviceList = services;
         if(serviceList === ["hard","coded","in"]){
-          setup.setupRequired =setup.toggleSetup(false);
+          setup.setupRequired = setup.toggleSetup(false);
         }
         document.location.reload();
-      
     }); 
   }
 
+  // Declares a constant databaseButtons and initialize it an empty array
   const databaseButtons =[];
+
+  /* Iterates over the serviceList to create a button for each service. Each button is pushed into the databaseButtons array as the button is created. Each button has an onclick function that invokes the window confirm function with a warning message (ex:'Are you sure you want to delete this service?') and stores the result of invoking confirm into a constant moveForward. If the moveForward is true, then onDelete function is invoked with the index of where the service is stored within the serviceList*/
   for(let i = 0; i<serviceList.length; i++){
     databaseButtons.push(<button className="microserviceBtn deleteMicroservice" key ={"delete"+i} onClick={()=>{
-      const moveForward = confirm(`Are you sure you want to delete ${serviceList[i]}? \n If "YES" press the "OK" button, \n else press the "Cancel" button`);
-      // if yes run the function 
+      const moveForward = confirm(`Are you sure you want to delete ${serviceList[i]}? \n If "YES" press the "OK" button, else press the "Cancel" button`);
       if (moveForward){onDelete(i)}
 
     }}>{serviceList[i]}</button>)
   }
-
+  // returns the title of the page with all of the services that can be deleted as buttons 
   return (
     <div className="mainContainer">
         <h1 className='overviewTitle'>Press on the Database You Want to Delete</h1>
@@ -47,4 +52,6 @@ const DeleteService = (props) => {
   );
 };
 
+// export the DeleteService function so that it can imported anywhere
 export default DeleteService;
+

app/components/Modal.jsx

@@ -29,9 +29,7 @@ const Modal = (props) => {
 
   // event.stopPropogation allows the user to interact with the chart as opposed to a click on the
   // chart bubbling out and closing the Modal.
-
-  console.log('Modal Props: ', props);
-  console.log('Modal props.modalChart: ', modalChart);
+  
   return (
     <div id="modalWindow" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>
       <div id="modalContent" onClick={(event) => event.stopPropagation()}>

app/index.css

@@ -454,4 +454,5 @@ form {
 }
 .deleteMicroservice{
   padding: 10px;
+  margin: 10px;
 }