microservices shows up when the button is pressed instead of an error also I added a doughnut chart

Author: jenaepen

Main.js

@@ -6,6 +6,8 @@ const connectMongoose = require('./model/mongoose-connect');
 const CommunicationSchema = require('./model/mongoose-communicatonSchema');
 const HealthInfoSchema = require('./model/mongoose-healthInfoSchema');
 
+//declare a variable pool for SQL connection
+let pool;
 let win;
 function createWindow() {
   win = new BrowserWindow({
@@ -55,19 +57,17 @@ ipcMain.on('setup', (message) => {
 // Loads existing settings JSON and update settings to include new services entered by the user.
 ipcMain.on('submit', (message, newService) => {
   // set the variable 'state' to the contents of /user/settings.json
-  // contents => "setupRequired" (boolean) ,"michelleWasHere" (boolean),"services" (Array)
+  // contents => "setupRequired" (boolean),"services" (Array)
   // setupRequired- toggle the page for adding database
-  // michelleWasHere - I believe initiate the service array
   // services - name of DB  stores dbType, and uri 
   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.
-  if (state.michelleWasHere) {
+  // if statement is used to replace hard coded data. Hard coded data is needed to avoid a load error caused by Electron querying the database before a user has added or selected a database.
+  if (state.setupRequired) {
     state.setupRequired = false;
-    state.michelleWasHere = false;
     state.services = [JSON.parse(newService)];
     //is updating the /user/settings.json file with the first new service
     fs.writeFileSync(path.resolve(__dirname, './user/settings.json'), JSON.stringify(state));
@@ -100,13 +100,15 @@ ipcMain.on('dashboard', (message) => {
 
 // Queries the database for communications information and returns it back to the render process.
 ipcMain.on('overviewRequest', (message, index) => {
-  // Gets the database type from /user/settings.json services: [[name, dbType, uri],...]
-  const databaseType = JSON.parse(
+  //acquires the services from user settings.json file
+  const services = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
-  ).services[index][1];
+  ).services
+  const databaseType = services[index][1];
+  const URI = services[index][2];
 
   if (databaseType === 'MongoDB') {
-    connectMongoose(index);
+    connectMongoose(index,URI);
     CommunicationSchema.find({}, (err, data) => {
       if (err) {
         console.log(`An error occured while querying the database: ${err}`);
@@ -121,13 +123,13 @@ ipcMain.on('overviewRequest', (message, index) => {
   }
 
   if (databaseType === 'SQL') {
-    // What is index? index - is passed on from ServiceDashboard as a prop when the button was  created. When the button is pressed, the serviceSelected is set to <ServiceOverview index ={i}>. The ServiceOverview makes the ipcRenderer.send('overviewRequest', props.index). The index indicates which service is being called
-    const pool = connectSQL(index);
+    pool = connectSQL(index,URI);
     const getCommunications = 'SELECT * FROM communications';
     pool.query(getCommunications, (err, result) => {
       if (err) {
        return message.sender.send(JSON.stringify('Database info could not be retrieved.'));
       }
+      console.log('Connected to SQL Database')
       //queryResults is an array of objects with the following keys {"id","currentmicroservice","targetedendpoint","reqtype","resstatus","resmessage","timesent"}
       const queryResults = JSON.stringify(result.rows);
       // Asynchronous event emitter used to transmit query results back to the render process.
@@ -143,7 +145,6 @@ ipcMain.on('detailsRequest', (message, index) => {
   ).services[index][1];
 
   if (databaseType === 'MongoDB') {
-    connectMongoose(index);
     HealthInfoSchema.find({}, (err, data) => {
       if (err) {
         message.sender.send('detailsResponse', JSON.stringify(err));
@@ -155,8 +156,8 @@ ipcMain.on('detailsRequest', (message, index) => {
   }
 
   if (databaseType === 'SQL') {
-    //what is index?
-    const pool = connectSQL(index);
+
+    // const pool = connectSQL(index);
     const getHealth = 'SELECT * FROM healthInfo';
     pool.query(getHealth, (err, result) => {
       if (err) {

app/assets/pieChart.png

@@ -1,6 +1,8 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { useState } from 'react';
 import Modal from './Modal.jsx';
+import pieChart from '../assets/pieChart.png'
+
 
 // Renders health info detail buttons
 const ServiceDetails = (props) => {
@@ -16,8 +18,10 @@ const ServiceDetails = (props) => {
   const { currentMicroservice } = props;
 
   // Dictionary used by the healthInfoButtons loop below
+  //    { id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
+  
   const buttonProperties = [
-    { id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
+    { id: 'request', alt: 'Request Data', src: pieChart },
     { id: 'response', alt: 'Response Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
     { id: 'speed', alt: 'Speed Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
     { id: 'processes', alt: 'Processes Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
@@ -32,6 +36,7 @@ const ServiceDetails = (props) => {
   const healthInfoButtons = [];
   for (let i = 0; i < buttonProperties.length; i += 1) {
     healthInfoButtons.push(
+    <div>
       <div className="healthChartContainer">
         <input
           onClick={() => {
@@ -43,9 +48,14 @@ const ServiceDetails = (props) => {
           type="image"
           id={buttonProperties[i].id}
           src={buttonProperties[i].src}
-          width="50px"
+          width="60px"
           alt={buttonProperties[i].alt}
         />
+        <br/>
+        <div style={{color:'white', paddingLeft:'7px'}}>
+        {buttonProperties[i].id}
+        </div>
+      </div>
       </div>,
     );
   }

app/components/ServiceDetails.jsx

@@ -25,7 +25,7 @@ const ServiceOverview = (props) => {
     ipcRenderer.on('overviewResponse', (event, data) => {
       // Adds to state and context.
       setOverviewState(Object.values(JSON.parse(data)));
-      console.log('OverviewState:', overviewState)
+      console.log('gathering data')
       serviceComponents.overviewData = JSON.parse(data);
     });
   }, []);

app/components/ServiceOverview.jsx

@@ -25,6 +25,8 @@ const ServicesDashboard = (props) => {
           type="button"
           key={`${i}${context[i]}`}
           onClick={() => {
+            // jenae added this
+            console.log('main button clicked')
             setSelection(<ServiceOverview index={i} />);
           }}>
           {context[i]}
@@ -49,7 +51,6 @@ const ServicesDashboard = (props) => {
             type="submit"
             key="BackToStart"
             onClick={() => {
-              // always return true since false is passed into the toggleSetup
               setup.setupRequired = setup.toggleSetup(false);
               setSelection(<AddService />);
             }}

app/components/ServicesDashboard.jsx

@@ -1,11 +1,9 @@
 const mongoose = require('mongoose');
-const { services } = require('../user/settings.json');
 
 // 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 = (i) => {
-  const URI = services[i][2];
+const connectMongoose = (i, URI) => {
   return mongoose.connect(URI, { useNewUrlParser: true, useUnifiedTopology: true }, (err) => {
-    if (err) console.log(err);
+    if (err) return console.log(err);
     console.log('Connected to Mongo database!');
   });
 };

model/mongoose-connect.js

@@ -1,19 +1,10 @@
 const { Pool } = require('pg');
-const { services } = require('../user/settings.json');
 
 // SQL 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 connectSQL = (i) => {
-  //there are no links - the following is being used for SQL "services": [["hard", "coded", "solution"]], useContext should be used here
-  const URI = services[i][2];
+const connectSQL = (i, URI) => {
   const pool =new Pool({
     connectionString: URI,
   })
-  //verifying that the connection has been made by stating the time it was connected 
-  // This code could be causing too many request to the database 
-  // pool.query('SELECT NOW()', (err, res) => {
-  //   if(err) return message.sender.send('detailsResponse', JSON.stringify('Did not connect to database',err));
-  //   console.log('Database '+services[i][0]+' has been connected at '+res.rows[0].now)
-  // })
   return pool ;
 };
 

model/sql-connect.js

@@ -1 +1 @@
-{"setupRequired":false,"michelleWasHere":false,"services":[["microservice1","SQL","postgres://gymyqkck:KDN5_PWumJO6UorMKuex8LLGBsTlISs8@salt.db.elephantsql.com:5432/gymyqkck"]]}
+{"setupRequired":true, "services":["hard","coded","in"]}